AyudaBloggers{...}
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.
Escrito por
víctor calderon

Víctor Calderón es un jóven chileno de 21 años, estudiante analista programador y orgulloso padre de una hermosa niña.

Moderador en +TBEE y escritor/fundador de este blog.

tweet

Blogroll de Ayuda Bloggers