domingo, 26 de junio de 2011

Panel de Administración para Blogger

La clase (class) item-control blog-admin permite mostrar elementos solamente para el administrador del blog. A base de esta clase y con un poco de CSS simple he creado un menú flotante que será visible únicamente para el administrador del blog.

Este menú se sitúa el la esquina superior derecha del blog y tiene la particularidad de seguir el contenido del blog mediante la propiedad fixed. Sirve principalmente para ingresar a las funciones básicas de Blogger.



Vista previa del menú:

La imagen solo es referencial.

¿Cómo añadirlo a Blogger?:
 
Paso 1: Añadiendo el menú:

En ''Diseño | Edición HTML'', buscaremos la siguiente sección:
</body>

Arriba de esta pegaremos el siguiente código:

<span class='item-control blog-admin' style='border:4px solid #fff; border-radius:5px; right:200px; position:fixed; top:5px; padding:5px; background: #000; color: #fff;'>
<a href='http://blogger.com/home'>Escritorio Blogger</a> |
<a href='http://www.blogger.com/post-create.g?blogID=ID-DEL-BLOG'>Nueva Entrada</a> |
<a href='http://draft.blogger.com/blog-options-basic.g?blogID=ID-DEL-BLOG'>Configuración</a> |
<a href='http://www.blogger.com/rearrange?blogID=ID-DEL-BLOG'>Diseño</a> |
<a href='http://www.blogger.com/html?blogID=ID-DEL-BLOG'>Edición HTML</a> |
<a href='http://www.blogger.com/logout.g'>Salir</a>
</span>


Paso 2: Añadiendo detalles con CSS:

Busca la siguiente sección:
]]></b:skin>
Arriba de esta pega el siguiente código:
.item-control.blog-admin a {
color: #fff;
font-weight:bold;
font-size:14px;
}


Importante:
  • Deberás reemplazar el valor ID-DEL-BLOG por el ID de tu blog, este se encuentra en la barra de direcciones en Configuración, Diseño, Comentarios o cualquier otra pestaña del escritorio de Blogger:

  • NO incluyas mas estilos a la propiedad item-control blog-admin porque es muy posible que los botones de edición del blog ( y ) se vean afectados también, si deseas añadir o personalizar la clase, hazlo mediante la misma (Es decir no mediante </b:skin>).

No hay comentarios:

Publicar un comentario