14 junio 2013

Recuerda descargar tu plantilla antes de empezar con el tutorial. Ésto lo haces en: Plantilla > Crear/Restablecer copia de seguridad > Descargar plantilla completa. De ése modo la puedes volver a instalar.

Widget de Opciones Visible solo para el Administrador del Blog

Algo que echamos de menos muchos de los que ocultamos la barra de navegación de Blogger, es la posibilidad de ingresar al editor de entradas para empezar a escribir una nueva entrada cuando estamos en nuestro blog.

Si utilizas las vistas dinámicas, sabrás que Blogger ha integrado dos enlaces que aparecen como iconos, con los cuales es posible acceder con uno al editor de entradas, y con el otro al escritorio.

Pues vamos a hacer algo similar, para que como administrador del blog puedas ingresar tanto al editor de Blogger como al escritorio. No usaremos ninguna imagen, ya que estamos agregando los datos de éstas, usando este herramienta para convertir imágenes en base64, de ese modo no habrá que alojar ninguna imagen, ni afectar la carga del blog. El widget tendrá la apariencia que puedes ver a continuación:

Widget con opciones de escritorio y nuevo post

¿Te gusta la idea?, entonces échale un vistazo a los pasos para saber cómo hacerlo ;)

Pasos

  1. Copia el siguiente código, y págalo en una nota de tu computadora.

    <span class='item-control blog-admin'> <span class="panel_adm"> <strong>Opciones del administrador</strong> <a class="escritorio" href="http://www.blogger.com/home" target="_self" title="Escritorio">Escritorio</a> <a class="post-nuevo" href="//www.blogger.com/post-edit.g?blogID=123456789&from=pencil" target="_self" title="Post Nuevo">Nuevo post</a> </span> </span>

  2. Selecciona la pestaña Diseño, y toma nota del id de tu blog, que aparece en la barra de direcciones del navegador, y que puedes identificar porque aparece después de blogID=  como puedes apreciar en la siguiente imagen:


    Barra de direcciones del navegador

  3. Una vez que tengas el Id de tu blog, ponlo en lugar del número que aparece resaltado de rojo (123456789) en el código del paso 1.
  4. Luego, agrega el código del paso 1 ya editado a un gadget con la opción HTML/Javascript, en la ubicación que quieras que aparezca, por ejemplo, como primer elemento en la columna lateral y guarda los cambios en Guardar disposición.
  5. Finalmente, agrega el CSS, en la opción de Añadir CSS que se encuentra en el diseñador de plantillas (Plantilla > Personalizar > Avanzado > Añadir CSS) y guarda el cambio en "Aplicar al blog".
    span.panel_adm{display:block;background:#f4f4f4;width:220px;height:75px;border:1px solid #e8e8e8}
    .panel_adm strong{font-size:15px;display:block;width:100%;border-bottom:1px solid #e8e8e8;text-indent:6px;padding:4px 0;margin-bottom:10px}a.escritorio{background-image: url(data:image/gif;base64,R0lGODlhEgARALMAALu7u6WlpcfHx46OjoODg2FhYZmZmenp6WxsbHd3d93d3VVVVdLS0rCwsPT09EpKSiH5BAAAAAAALAAAAAASABEAAARW0MkpAaA4t/da/hvXfVQojqR5opi6spI6HEdwevGJUMntACsDxXYC2BCiAqUgQgodKoJAQDgFDhPB6yWgKF6LFQOzAnxPGaZoYDgtMr0tJ5EZyDmESQQAOw==);background-repeat:no-repeat;background-position:10% 10%}
    a.post-nuevo{background-image:url(data:image/gif;base64,R0lGODlhEgAQALMAAHd3d93d3cfHx2FhYWxsbIODg46OjrCwsFVVVdLS0kpKSvT09AAAAAAAAAAAAAAAACH5BAAAAAAALAAAAAASABAAAARCcMlJZULq1D2P+gFHJUPiIaG4XApiJuqKfUMsfy2ssp8b87nfLBgD4HyxgoBA3LUEAF3M8CHYJAEFQHNdHATd8CYCADs=);background-repeat:no-repeat;background-position:10% 12%}
    a.escritorio, a.post-nuevo {display:inline-block;height:22px;padding:4px 0 0 28px;color:#3399cc;font-size:12px}
    a.escritorio{margin-right:24px}
    a.post-nuevo:hover,a.escritorio:hover{text-decoration:underline !important;}

¡Y listo!, ya tendrás un widget que solo podrás ver tú como administrador del blog, y con el que podrás acceder al editor de entradas como al escritorio ;)

Notas finales:
  • Puedes cambiar el texto que dice: "Opciones del administrador" por "Mis opciones" o cualquier otro texto.
Espero sea útil ;)

Artículos recomendados:

Gracias por compartir tu comentario y hacernos saber tu opinión.