Icono por categoría en Blogger (Versión 2)

Anteriormente vimos una manera de clasificar mediante un ícono la categoría de la entrada, la desventaja de este truco es que era necesario insertar constantemente un código en el título de la entrada. Encontré una condicionante en Blogger muy útil para que este paso sea automático, es decir que sólo necesitemos definir una etiqueta al blog y se mostrará una imagen de clasificación.

Para conseguirlo no es necesario recurrir a javascript, pero puede llevar tiempo configurarlo adecuadamente.

Puedes ver un ejemplo mediante la siguiente imagen:

El tutorial:

Lo que haremos será crear el siguiente código por la cantidad de etiquetas que tengamos en el blog:

<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.name == &quot;ETIQUETA1&quot;'>
<img id="categoria1" style="margin:0; padding:0; border:none;" src="URL-IMAGEN" title="Título imagen"/>
</b:if>
</b:loop>

Reemplaza los siguientes valores:

• ETIQUETA1: Por la etiqueta que tendrá ese ícono (Respetando mayúsculas y minúsculas).
• categoria1: Por el ID que le asignarás a esta imagen, puede ser cualquiera.
• URL-IMAGEN: Por la imagen para esta categoría.

Veamos un ejemplo para 2 etiquetas:

<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.name == &quot;CSS&quot;'>
<img id="categoria1" style="margin:0; padding:0; border:none;" src="http://ejemplo.com/imagen-categoria-css.png" title="Título imagen"/>
</b:if>
</b:loop>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.name == &quot;Tutoriales Blogger&quot;'>
<img id="categoria2" style="margin:0; padding:0; border:none;" src="http://ejemplo.com/imagen-categoria-tutoriales-blogger.png" title="Título imagen"/>
</b:if>
</b:loop>

Este código deberás pegarlo en el lugar que tú quieras, recomiendo antes o después del siguiente código para mostrarlo arriba o debajo de la entrada respectivamente:

<data:post.body/>

Con esto podremos establecer una imagen para cada categoría, pero como todo truco "artesanal" tiene un inconveniente, las entradas con varias categorías mostrarán varios íconos al mismo tiempo, para corregirlo puedes hacerlo del siguiente método.

Primero, en "Edición de HTML"  de la entrada, deberás pegar el siguiente código:

<style type='text/css'>
#categoriaX {display:none;}
</style>

En donde #categoriaX corresponde al ID de la imagen que quieras ocultar.

Si son varias imágenes que deseas ocultar deberás hacerlo así:

<style type='text/css'>
#categoria1, #categoria 2, #categoria3, #categoria 4 {display:none;}
</style>

Extra: Dando flotación a la imagen:

Puedes darle a cada imagen flotación a la izquierda o derecha para que no se muestre arriba o debajo del texto, sino al lado de este. A cada imagen añádele el atributo "float" de la siguiente forma:

<img id="categoria1" style="margin:0; padding:0; border:none; float:left;" src="URL-IMAGEN" title="Título imagen"/>

En donde puedes cambiar left por right para cambiar la orientación de la imagen.