Icono en los títulos de Blogger (Por categorías)

Hace no mucho recibí un correo de un usuario que quería insertar un ícono en cada tipo de categorías. Este ícono debía mostrarse al lado izquierdo del título, de tal forma que quede así:

El ícono variará según la categoría

El tutorial es bastante sencillo pero tiene inconvenientes, los cuales trataremos en la entrada.

Para conseguir esto, sólamente necesitamos un poco de CSS, nada de scripts complicados.

Paso 1: Creando los estilos para los títulos:

Debes saber bien que primero tienes que crear categorías, en mi caso utilizaré 2:

• juegos
• programas

Recordad que sólamente son ejemplos para que se pueda entender.

Empezaremos a crear los estilos para ambas categorías:

h3.juegos {
padding-left: 20px;
background: url(http://www.icono-de-la-categoría-juegos.png) left no-repeat;
}
h3.programas {
padding-left: 20px;
background: url(http://www.icono-de-la-categoría-programas.png) left no-repeat;
}

Como puedes apreciar, he creado 2 estilos para estos títulos (h3 corresponden a títulos).

Explicación de los códigos:

• Se le asigna un padding a la izquierda (espaciado) a ambos estilos para que los títulos no sobrepongan la imagen.
• El background corresponde a la imagen que se utilizará como ícono. A éste le ha atribuido posición a la izquierda y también la opción no-repeat para que la imagen no se repita.

Una vez que hemos creado nuestras categorías y les hemos añadido íconos, procederemos a pegarlos en nuestra zona CSS (Antes de  ]]></b:skin>)

Paso 2: Añadiendo la clase al título:

Una vez que ya hemos creado nuestras categorías, procedemos a modificar el título de una entrada que se encuentre dentro de las categorías que hemos creado, en mi caso utilizaré la categoría juegos:

<h3 class='juegos'>Este es el título de la entrada</h3>

Verás que he escrito el título de una forma distinta, he añadido el título dentro de una clase, la cual corresponde a juegos. Este título deberá reemplazar al de la entrada en cuestión.


Inconveniente:

• Los navegadores mostrarán en la barra de título todo el código, no se ocultarán las tags.

Recomendaciones:

• No utilizen íconos demasiado grandes. Recomiendo íconos de 16x16px y 24x24px.