Iconos para los títulos de las entradas del blog

Hace un tiempo os comenté una manera original de dar un toque personal a los títulos de las entradas de nuestro blog, haciendo referencia a un tutorial de Julia, de Postreadicción. La descubrí gracias a María Rosa, de Sweet Experience. Cuando estábamos diseñando su blog, me pasó el enlace al blog de Julia porque le gustaban los cupcakes que adornaban los títulos de sus entradas.

En su blog, encontré un tutorial estupendo para poner un icono delante del título de las entradas del blog, igual que el suyo, aunque hoy he estado buscándolo para enlazarlo ¡y no he sido capaz! Así que como es algo muy original que nos puede servir para diferenciar nuestro blog, he decidido compartirlo con vosotros. ¡Es muy fácil!

El Código

<img src='URL DE TU IMAGEN'/>

Elegir el diseño

Solo tienes que elegir el que más te guste. Como para otros tutoriales, vamos a necesitar la URL de la imagen para añadirla, es decir, que necesitar subirla a dropbox, picasa o similar.

Instalación

1.- Una vez hayamos subido la imagen a internet y tengamos el enlace a la misma, vamos a la plantilla HTML de nuestro blog.

2.- Pinchamos dentro de nuestra plantilla, donde sea, y pulsamos simultáneamente:

Control + F

3.- En el buscador interno que aparecerá, escribimos:

<h3 class='post-title entry-title' itemprop='name'>

4.- Encontraremos dos, nos interesa el segundo.

5.- Unas líneas más abajo aparece:

<a expr:href='data:post.url'><data:post.title/></a>

6.- Una vez hayamos localizado este último código, vamos a insertar nuestra imagen justo donde ves aquí abajo:

<a expr:href='data:post.url'><img src='URL DE TU IMAGEN'/><data:post.title/></a>

7.- Comprobamos en Vista Previa que todo está correcto, guardamos y ¡tachán! Ya tenemos nuestro icono delante del título de nuestra entrada.

¿Te animas a intentarlo?

---

Suscríbete a mis entradas por email ¡para no perderte nada!





♥ Las recibirás en tu bandeja de entrada el mismo día que sean publicadas ♥