English Português

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”.

  2. Buscamos el siguiente código:
    <b:includable id='status-message'>
  3. 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>
  4. 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='"http://blogyweb.blogspot.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='"http://blogyweb.blogspot.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.

  5. Ahora busca el siguiente código:
    ]]></b:skin>
  6. 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;
    }
  7. Guarda y listo!

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

Escrito por Francisco Oliveros

Soy un gran aficionado del diseño y de todo lo que el código puede comunicar. Ingeniero mecánico por profesión, pero dedicado al desarrollo web a tiempo completo.

Blog / Twitter

Artículos relacionados

Sigue leyendo consejos, tips y tutoriales para tu blog.

    Comentarios

    1. Ekleipsis / Hace 10 años /

      hOLA! ESO ES PADRISIMO…!
      PUEDES VENRIR A MI BLOG SOBRE THALIA…LA DIRECCION ES http://WWW.NUESTRATHALIA.BLOGSPOT.COM

      TODO EN BLOG/SITIO ES MUY BUENO Y MUY FACIL DE HACERLO…
      GRACIAS!!!

      Responder a Ekleipsis →
    2. porfineslunes / Hace 10 años /

      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.

      Responder a porfineslunes →
    3. Francisco / Hace 10 años /

      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!

      Responder a Francisco →
    4. N0xTrUm / Hace 10 años /

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

      Responder a N0xTrUm →
    5. Francisco / Hace 10 años /

      Gracias N0xTrUm! 🙂

      Saludos!

      Responder a Francisco →
    6. Walter / Hace 10 años /

      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

      Responder a Walter →
    7. Francisco / Hace 10 años /

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

      Responder a Francisco →
    8. eduardo / Hace 10 años /

      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

      Responder a eduardo →
    9. eduardo / Hace 10 años /

      no salio el codigo es el primero quie diste no me aparece

      Responder a eduardo →
    10. Francisco / Hace 10 años /

      verifica tengas activado “Expandir plantillas de artilugios”

      Responder a Francisco →
    11. aru / Hace 10 años /

      hay alguna forma para que el menu quede de forma vertical?

      Responder a aru →
    12. aru / Hace 10 años /

      perdon entendi cualquier cosa

      Responder a aru →
    13. Andrea / Hace 9 años /

      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

      Responder a Andrea →
    14. Andrea / Hace 9 años /

      Bueno…ya lo encontré, jeje era error mío al escribir lo de código de cabecera

      Responder a Andrea →
    15. Andrea / Hace 9 años /

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

      Responder a Andrea →
    16. Antisocial / Hace 9 años /

      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

      Responder a Antisocial →

    Responder

    ¡Gracias por dejar tu opinión! Por favor procura que tus comentarios estén dentro tema, que no sean promocionales (spam), ilegales u ofensivos, de otro modo, serán borrados. Todos los enlaces serán moderados y la URL indicada NO será enlazada.

    Blog and Web es un blog de Blógstica. Hospedado desde 2008 en Liquid Web.

    Términos de uso - Política de privacidad