La introducción de la categorización por etiquetas en Blogger, sin duda fue una gran ayuda para la clasificación de la información de nuestro Blog, aun así creo que hay detallitos que harían un poco más amigable la navegación de los usuarios, Una de ellas es tener un encabezado en las etiquetas más importantes, es decir, que si tienes una sección llamada tecnología, sobre las entradas de la página de esta etiqueta halla una leyenda como “Estas en la sección de tecnología”. Por ejemplo en nuestra sección de plantillas:

Veamos como hacerlo.

    1. Entra a la pestaña “Plantilla” o también llamada “Diseño” desde el escritorio y después a la opción “Edición de HTML” donde activamos la casilla “Expandir plantillas de artilugios”.


    1. Buscamos el siguiente código:
      <b:includable id='status-message'>
    2. Debajo de este código colocaremos cada uno de los mensajes o imagenes que usaremos como cabecera en cada etiqueta, para lo que usaremos el siguiente esquema:
      <b:if cond='"http://TUBLOG.blogspot.com/direccion-de-etiqueta" == data:blog.url'>
<!-- Código de cabecera aquí -->

</b:if>

Donde http://TUBLOG.blogspot.com/direccion-de-etiqueta es la dirección de la etiqueta. Y justo bajo: <!– Código de cabecera aquí –> es el lugar correcto para poner el código de la cabecera.

Tendras que seguir este esquema de código para cada etiqueta a la que pretendas ponerle una cabecera.

Ejemplo:

Para una cabecera de texto en mi etiqueta llamada “CSS”:

<b:if cond='"https://blogandweb.com/search/label/CSS" == data:blog.url'>
<!-- Código de cabecera aquí -->
<h2>Estas en la sección de CSS</h2>
</b:if>

Para una cabecera de imagen en mi etiqueta llamada “Photoshop”:

<b:if cond='"https://blogandweb.com/search/label/Photoshop" == data:blog.url'>
<!-- Codigo de cabecera aqui -->
<img src='http://sitio.com/direccion-de-la-imagen'/>
</b:if>

Donde http://sitio.com/direccion-de-la-imagen es el sitio donde se encuentra la imagen que pretendo usar como cabecera en la etiqueta photoshop.

Puedes usar cualquiera de estas dos opciones indiferentemente y aplicarlo a todas tus etiquetas o a las que selecciones, poniendo el código justo abajo del código de la anterior.

  1. Ahora busca el siguiente código:
    ]]></b:skin>
  2. Justo arriba pega los siguientes estilos:
    /*Estilos del contenedor de cabeceras de etiquetas*/
.status-msg-wrap { 
width:100% !important;
margin:0px !important
}
.status-msg-bg { 
background:transparent !important
}
.status-msg-border { 
border:none !important;
}
  3. Guarda y listo!

Cualquier duda en los comentarios. Espero les sirva y no tengan problema.