Añadir un ícono a cada una de las etiquetas de Blogger

Hace algún tiempo atrás vimos la manera de personalizar las etiquetas de las entradas de Blogger mediante CSS, y en otros blogs como Ciudad Blogger se ha visto la forma de incluir un ícono en las etiquetas, pero de manera grupal añadiendo una imagen al final de cada enlace.

Gracias a las condicionales en Blogger añadiremos un ícono pero a cada etiqueta de manera distinta, es decir que si la categoría es de música, entonces el ícono que aparecerá a su lado será un instrumento musical, una nota, etc.



Paso 1: Añadiendo el gadget de etiquetas modificado:

Este paso es un poco más complicado debido a que necesitas ubicar correctamente el <b:section>. Para ello, deberás buscar una línea muy similar a esta (Búscala sin expandir los artilugios para que sea más sencillo):

<b:section class='sidebar' id='sidebar-wrapper' showaddelement='yes'/>

Recuerda que muy dificilmente la encontrarás idéntica a ésta, deberás fijarte en buscar el <b:section> con el atributo class='sidebar' (En caso de estar el gadget en la columna lateral del blog).

Si ya tienes un gadget de etiquetas dentro de esta sección, entonces deberás suprimirlo, bastaría con buscar un código similar a éste, obviamente se encontrará en el <b:section> que hayamos identificado anteriormente:

<b:widget id='Label1' locked='false' title='Etiquetas' type='Label'/>

Este código lleva un atributo title, el cual corresponde al título del gadget. Si tu gadget lleva como título "Categorías" u otra cosa entonces deberás fijarte que el gadget lo lleve en éste atributo, o de lo contrario estarás suprimiendo otro en caso de tener varios.

Si ya lograste identificar el gadget, entonces deberás reemplazarlo por este código:

<b:widget id='Label99' locked='false' title='Etiquetas' type='Label'>
    <b:includable id='main'><div id="gadget-etiquetas">
            <h2><data:title/></h2>
        <ul>
            <b:loop values='data:labels' var='label'>
                <li expr:class='data:label.name'>
                    <b:if cond='data:blog.url == data:label.url'>
                        <span  expr:dir='data:blog.languageDirection'><data:label.name/></span>
                    <b:else/>
                        <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
                    </b:if>
                </li>
            </b:loop>
        </ul>
    </div></b:includable>
</b:widget>

Previsualiza los cambios y si no hay ningún inconveniente procedes a guardar la plantilla.

Nota: Te preguntará si deseas suprimir el gadget, deberás aceptar dicha modificación.

Paso 2: Añadir CSS en cada etiqueta:

Una vez que ya hayas realizado el paso anterior, deberás pegar el siguiente código antes de ]]></b:skin>:

#gadget-etiquetas ul {
margin:0;
font-family:tahoma;
}

#gadget-etiquetas a {
color:#777;
cursor:pointer;
}

#gadget-etiquetas li[class="Etiqueta uno"] {
list-style-image:url(URL-IMAGEN);
}
#gadget-etiquetas li[class="Etiqueta dos"] {
list-style-image:url(URL-IMAGEN);
}
#gadget-etiquetas li[class="Etiqueta tres"] {
list-style-image:url(URL-IMAGEN);
}
#gadget-etiquetas li[class="Etiqueta cuatro"] {
list-style-image:url(URL-IMAGEN);
}
#gadget-etiquetas li[class="Etiqueta cinco"] {
list-style-image:url(URL-IMAGEN);
}
#gadget-etiquetas li[class="Etiqueta seis"] {
list-style-image:url(URL-IMAGEN);
}
#gadget-etiquetas li[class="Etiqueta siete"] {
list-style-image:url(URL-IMAGEN);
}
#gadget-etiquetas li[class="Etiqueta ocho"] {
list-style-image:url(URL-IMAGEN);
}
#gadget-etiquetas li[class="Etiqueta nueve"] {
list-style-image:url(URL-IMAGEN);
}
#gadget-etiquetas li[class="Etiqueta diez"] {
list-style-image:url(URL-IMAGEN);
}

Deberás reemplazar el nombre etiqueta-XXXX por la etiqueta que corresponda (Respetando mayúsculas, tíldes, separaciones, etc), junto con añadir un ícono en el atributo list-style-image. Observa un ejemplo:

#gadget-etiquetas ul {
margin:0;
font-family:tahoma;
}

#gadget-etiquetas a {
color:#777;
cursor:pointer;
}

#gadget-etiquetas li[class="Música"] {
list-style-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFgiR6Hgg9p-P0tiQGo5fcqOhMDiVbYbV3tfwpWlzwbXFLAW7_2-94zZZ3I9ZkDDZO1HZjW7NXhfEmTRjfhijpBD057AD7oNhdT6m2RMKRRtwDNaV0BmjpaqN2062PEI4N9kWH3ZXxN1g/s1600/music-icon.png) !important;
}
#gadget-etiquetas li[class="Arte"] {
list-style-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhc20MFLH5KuYRofVIwXPFF-DQoGDO9vp-iooesSB-BSL1Kyt5-TRWA7DQ16wPpmgG9uHpwoA3nuGGWTBtSQyhqvDdqoPftyCbdyoO3ybZHIW3fiD3X4LG3OUlRQYqTa4whePEnPr0anIM/s1600/art_icon.png);
}

#gadget-etiquetas li[class="Vídeos"] {
list-style-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigX8YXBfL0Cwwg4BjPx2pnK6v6six7oTksyKDbvpEThX5Hyhxcu-pa_bzwSQykTLhYHrlEA41MeTXeENmwuCtQzVEkGV08PO8mGb6n3Rbrvjlu897WN0lS73x2erp3ELz1KeQ45yNr204/s1600/video_icon.gif);
}
#gadget-etiquetas li[class="Fotografías"] {
list-style-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw6BnaciV1PZelUIIWurKUFk8P7S1ylSjQmCYvMJGVOnQ2HqQ8DAkFB571t6sfwTZR6zSXuIorWGossL7axBrzSQ7z4aGNhzDeXIaODuhdWg1u5ZhLC63Al5pEaBESlAZdSacZKQr78q4/s1600/url.png);
}

El resultado será muy similar a este:




Paso 1: Reemplazar las etiquetas por defecto:

Lo primero que debes hacer en este caso, es buscar el siguiente código dentro de tu plantilla (Con las plantillas de artilugios expandidas):

<span class='post-labels'>
<!--
Este contenido, junto a la etiqueta span deberá suprimirse
-->
</span>

Deberás reemplazarlo con este código:

<div class='post-labels'>
  <b:if cond='data:post.labels'>
  <data:postLabelsLabel/>
  <div class='labels'>
   <b:loop values='data:post.labels' var='label'>
    <a expr:class='data:label.name' expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'></b:if>
   </b:loop>
  </div>
    </b:if>
</div>

Si no lo encuentras, y si en tus entradas no aparecen las etiquetas, puedes añadirlo justo debajo de:

<data:post.body/>

Paso 2: Aplicando CSS a las etiquetas:

Debido a que ya no manipulamos viñetas como lo hicimos en el método de los gadgets, tendremos que hacerlo levemente distinto. Copia y pega el siguiente código antes de ]]></b:skin>:

.post-labels {
margin:20px 0 10px 0;
padding:10px;
}

.post-labels a {
display:inline-block;
padding-left:20px;
margin: 0 8px 0;
}

.post-labels a[class="Etiqueta uno"] {
background:url(URL-ICONO) no-repeat left;
}

.post-labels a[class="Etiqueta dos"] {
background:url(URL-ICONO) no-repeat left;
}

.post-labels a[class="Etiqueta tres"] {
background:url(URL-ICONO) no-repeat left;
}

.post-labels a[class="Etiqueta cuatro"] {
background:url(URL-ICONO) no-repeat left;
}

.post-labels a[class="Etiqueta cinco"] {
background:url(URL-ICONO) no-repeat left;
}

.post-labels a[class="Etiqueta seis"] {
background:url(URL-ICONO) no-repeat left;
}

.post-labels a[class="Etiqueta siete"] {
background:url(URL-ICONO) no-repeat left;
}

.post-labels a[class="Etiqueta ocho"] {
background:url(URL-ICONO) no-repeat left;
}

.post-labels a[class="Etiqueta nueve"] {
background:url(URL-ICONO) no-repeat left;
}

.post-labels a[class="Etiqueta diez"] {
background:url(URL-ICONO) no-repeat left;
}

Recuerda reemplazar etiqueta-XXXX por la etiqueta que corresponda (Respetando mayúsculas, tíldes, etc), junto con añadir un ícono en el atributo background. Observa un ejemplo:

.post-labels {
margin:20px 0 10px 0;
padding:10px;
}

.post-labels a {
display:inline-block;
padding-left:20px;
margin: 0 8px 0;
}

.post-labels a[class="Música"] {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFgiR6Hgg9p-P0tiQGo5fcqOhMDiVbYbV3tfwpWlzwbXFLAW7_2-94zZZ3I9ZkDDZO1HZjW7NXhfEmTRjfhijpBD057AD7oNhdT6m2RMKRRtwDNaV0BmjpaqN2062PEI4N9kWH3ZXxN1g/s1600/music-icon.png) no-repeat left;
}
.post-labels a[class="Arte"] {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhc20MFLH5KuYRofVIwXPFF-DQoGDO9vp-iooesSB-BSL1Kyt5-TRWA7DQ16wPpmgG9uHpwoA3nuGGWTBtSQyhqvDdqoPftyCbdyoO3ybZHIW3fiD3X4LG3OUlRQYqTa4whePEnPr0anIM/s1600/art_icon.png) no-repeat left;
}

.post-labels a[class="Vídeos"] {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigX8YXBfL0Cwwg4BjPx2pnK6v6six7oTksyKDbvpEThX5Hyhxcu-pa_bzwSQykTLhYHrlEA41MeTXeENmwuCtQzVEkGV08PO8mGb6n3Rbrvjlu897WN0lS73x2erp3ELz1KeQ45yNr204/s1600/video_icon.gif) no-repeat left;
}
.post-labels a[class="Fotografías"] {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw6BnaciV1PZelUIIWurKUFk8P7S1ylSjQmCYvMJGVOnQ2HqQ8DAkFB571t6sfwTZR6zSXuIorWGossL7axBrzSQ7z4aGNhzDeXIaODuhdWg1u5ZhLC63Al5pEaBESlAZdSacZKQr78q4/s1600/url.png) no-repeat left;
}

El resultado:




Actualización: Se han reemplazado los selectores de clases por selectores de atributos para que puedan reconocerse etiquetas de 2 palabras o más.