Panel de Administración para Blogger

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>).
Artículo aleatorio
BuySellAds
BuySellAds
BuySellAds
BuySellAds
BuySellAds
Artículos destacados
Marca de agua en las imágenes con CSS # - Marca de agua en las imágenes con CSS
Ocultar entradas con determinada etiqueta en el inicio de Blogger # - Ocultar entradas con determinada etiqueta en el inicio de Blogger
Efecto de desenfoque con CSS # - Efecto de desenfoque con CSS
Cómo obtener la primera imagen del post en Blogger sin Javascript # - Cómo obtener la primera imagen del post en Blogger sin Javascript
Vídeotutorial: Crear plantilla para Blogger: Introducción a los códigos esenciales de Blogger # - Vídeotutorial: Crear plantilla para Blogger: Introducción a los códigos esenciales de Blogger