Blogger

Poner encabezado en las etiquetas de Blogger

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.

16 Comentarios

  • Os copio aquí el mensaje que os acabo de dejar en el post original 8el de la plantilla para Blogger portfolio):

    Por favor, se os ha agotado el ancho de banda para alojar esta imagen y justo acabo de poner yo esta plantilla en mi blog, que mola mucho por cierto, y ahora aparece desconfigurada la cabecera del blog 🙁

    Podríais por favor arreglarlo, ya que la imagen está linkeada a vuestro blog directamente, y aunque he intentando encontrarla en cahé para subirla a imageshack no me deja??? Por favor, ponednos la imagen el algún sitio para que podamos cogerla desde ahí y así no tener problemas de ancho de banda. De todos modos vuestro link a vuestra página sigue estando en mi página, así que… Gracias.

  • Hola!

    Ekleipsis: Muy bueno tu blog, veo que no tuviste ningun problema :), gracias por tus comentarios.

    Porfineslunes: AL parecer fue cosa de unas horas lo del ancho de banda y ahora esta bien, de cualquier modo, ahora que esta funcional aloja las imagenes en algun otro servidor para evitar estos problemas.

    Saludos!

  • Sin duda el mejor blog de ayuda, que he visto para blogger y las plantillas, magnificas, sigue asó 😉

  • Hola, Francisco a que puede ser que al intentar guardar o ir a vista previa salga este mensaje.
    No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
    Mensaje de error de XML: Element type «b:if» must be followed by either attribute specifications, «>» or «/>».

    Gracias, Walter

  • Hola Walter, por el tipo de error es muy probable no hallas cerrado bien una etiqueta o hallas omito alguna comilla.

  • hola que tal?

    sabes en la primera instruccion dijiste que buscaramos este codigo

    pero lo he buscado y no me aparece… estoy mal yo que puede ser?

    alguna solucion?

    salu2muy buena la pagina

  • Ops…cuando voy a guardar, me aparece el siguiente error:
    No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
    Mensaje de error de XML: The content of elements must consist of well-formed character data or markup.

    Y no sé cómo corregir el error, podrían ayudarme?
    Gracias

  • Lo único que sucede, es que al actualizar el blog, no me aparece por ningún lado las etiquetas como encabezado…

  • Gran tutorial, pero ¿existe la forma de que lo que cambie sea la imagen de la cabecera y no la de abajo?
    Sería muy de agradecer.
    Un saludo