miércoles, 15 de junio de 2011

Agregar una descripción a las etiquetas del blog

En algunas ocasiones es necesario ser lo más descriptivo posible con ciertas áreas del blog como por ejemplo en las páginas de etiquetas; ya sea porque quizá la etiqueta que elegimos no dice mucho sobre la temática de la que se habla, o porque el público al que está dirigido el blog necesita más detalles para su comprensión.
Así que una forma de ser más explícitos es agregar una descripción en las páginas de las etiquetas para cuando el lector haga click en esa etiqueta pueda tener una introducción sobre lo que encontrará en esa categoría.

Como también soy malo describiendo las cosas mejor mira en este blog de pruebas que enlaza a la etiqueta Juegos. Si das click en otras etiquetas verás que la descripción cambia y ninguna de ellas se ven ni en la portada ni en las entradas individuales.




Para agregar estas descripciones a las páginas de etiquetas haremos uso de los códigos condicionales para que -redundantemente- condicionemos que sólo se muestren en la etiqueta que especifiquemos, por lo tanto puedes hacerlo para todas las etiquetas de tu blog o sólo para las que elijas.

Primero ingresa a Diseño | Edición de HTML, marca la casilla Expandir plantillas de artilugios y busca esta línea:
<b:include data='top' name='status-message'/>
Si no la tienes probablemente la eliminaste para ocultar el mensaje "Mostrando entradas con la etiqueta..."
Si ese es tu caso entonces busca este código:
<!-- posts -->
<div class='blog-posts hfeed'>
Debajo de cualquier de esos códigos agrega esto:
<b:if cond='data:blog.url == &quot;http://nombre-de-mi-blog.blogspot.com/search/label/Nombre-de-la-etiqueta&quot;'>
<div id='IntroEtiquetas'>
<img src='URL de la imagen' style='float: left; border:0; margin: 0 5px 10px 0;'/>
...Aquí va la descripción de la etiqueta...
</div>
</b:if>
Escribe el nombre de tu blog y el de la etiqueta donde se indica. Si lo deseas también puedes agregar una imagen, pero si no, puedes quitar el código de la imagen y no pasa nada.
Ese código es para una sola etiqueta, si deseas más sólo agrega debajo de él otro código igual cambiando obviamente el nombre de la etiqueta y su descripción.

Ya que hayas hecho eso añade antes de ]]></b:skin> los estilos:
#IntroEtiquetas {
background:#6E6E6E; /* Color de fondo */
color:#000; /* Color del texto */
padding:20px;
}
Son estilos muy básicos pero que puedes mejorar agregando más o modificando los existentes para que se adapten a tu gusto.

Como ves es un procedimiento muy simple que puede ayudar a ilustrar las categorías de tu blog haciéndolas más personalizadas.

No hay comentarios:

Publicar un comentario