Imagen antes del título de las entradas de Blogger

Hay dos formas de colocar un icono o imagen pequeña antes del título de nuestras entradas, una desde el HTML de nuestra plantilla y la otra mediante CSS. Explicaré las dos, aunque personalmente recomiendo la segunda (mediante CSS):

[1-] En el HTML de nuestra plantilla expandimos elementos y buscamos esta parte del código:


<h3 class='post-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>

Justo después de <a expr:href='data:post.url'> añadimos la dirección (url) de nuestra imagen, dentro de "img src", así:

<img src= "http://img296.imageshack.us/img296/6237/preview16x16xt5.png"/>

Esta es la url de mi antiguo icono, que podéis usar si queréis sin ningún problema. ;-)

[2-] Otra opción es usar CSS, buscamos esto en nuestra plantilla, en la parte del CSS, por supuesto:
.post h3 {

Y a continuación pegamos estas líneas de código:
background: url(http://img296.imageshack.us/img296/6237/preview16x16xt5.png) no-repeat 0;
padding-left: 20px;

El padding-left nos dice la distancia que habrá del icono al texto, tendremos que cambiar su valor, según sea el tamaño de nuestro icono.
Usando la vista previa podemos ir cambiando el valor en padding hasta dar con el más adecuado.

Compartir Enlace