Iconos para los títulos de las entradas del blog

noviembre 05, 2013

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 ♥






Te encantará:

19 pensamientos ¡falta el tuyo! ;)

  1. Muy buenas, me parece muy interesante, pero me surge una consulta. Si no quiero poner esa imagen en todos los títulos de todas las entradas, si no solo en una o quiero persionalizar la imagen según la categoría, ¿puede hacerse?

    ¡Gracias!

    ResponderEliminar
    Respuestas
    1. ¡Hola Nelebka! De esta manera no, siempre sale el mismo, ya que la imagen se añade a la plantilla HTML, en la zona de las entradas del blog :)

      ¡Gracias a ti!

      Eliminar
    2. Hay una forma sencilla de añadir al título de cada entrada la imagen que queramos, pero la que conozco es manual y se hace en el momento de publicar una entrada.

      Cuando tenga preparado el tutorial, os cuento ;)

      ¡Feliz martes!

      Eliminar
  2. Pero qué chulada, Celia! Y vaya serie de iconos más monos que has mostrado! Otro estupendo tutorial para tener en cuenta.
    Besos!

    ResponderEliminar
  3. Me encantan todos tus tutoriales y trucos de diseño para blogs, me parecen super útiles.
    Espero que todo vaya viento en popa!

    Gracias por todo el trabajo que haces, el que se ve y el que no^^

    Un abrazo!

    ResponderEliminar
    Respuestas
    1. ¡Siiiii! Con menos tiempo que antes... ¡pero contenta y feliz! jajaja

      ¡Cuanto tiempo sin hablar, guapa! Me alegra infinito verte por aquí

      ¡¡Muchos besos!!

      Eliminar
  4. Hecho guapa, me ha encantado el tutorial. Un beso.
    Ahhh, lo puedes ver en http://mamatecleayacuna.blogspot.com.es/

    ResponderEliminar
  5. Hola Celia:
    Me ha gustado mucho el artículo, pero me gustaría más que se pudiera poner una imagen personalizada en cada título. ¿Está ese tutorial hecho?
    Un beso y mil gracias

    ResponderEliminar
    Respuestas
    1. ¡Hola guapa!

      Puedes ver como añadir un icono diferente en cada título en este tutorial: http://www.elperrodepapel.com/2013/11/disenar-entradas-blogger-iv.html

      ¡Besos y gracias a ti!

      Eliminar
  6. Buenas noches¡¡, lo he intentado de mil maneras, pero al final tuve que copiar la url de la imagen desde la que tienes aquí mismo en el post, porque si no me aparecía el icono de imagen sin abrir... había creado un icono propio y quería usarlo, pero no sé porqué no puedo... a ver si me lo aclaras. un saludo y gracias por tus aportaciones.

    ResponderEliminar
    Respuestas
    1. ¡Hola Mónica!

      Asegúrate de que la imagen que quieres usar está subida a internet. Puedes usar Picasa o Dropbox. Si la tienes alojada solo en tu ordenador, no se verá online.

      ¡Ya me cuentas! Feliz domingo :)

      Eliminar
  7. Hola buenas noches, pues yo lo siento pero no me funciona de ninguna de las maneras. Ni subiendo la URL de la imagen en el HTML de forma global como dices en este post, ni subiendo la imagen en el título del post como le has indicado a Naikari en su comentario. He probado con una imagen mía, con una de las imágenes que has puesto aqui (en concreto con la redondita naranja) y no hay manera. La imagen mia la he subido al blog y desde ahi en el HTML de la publicación he copiado su URL, de esa manera consigo todas las direcciones de las imágenes para modificar cosas y siempre me ha funcionado como si esruvieran alojadas en Dropbox. Pero he probado con la tuya y tampoco. No sé que es lo que sale mal porque normalmente no tengo problemas y siempre consigo realizar los cambios. Esta claro que algo estoy haciendo mal, y me gustaría poder ponerlo en mi nuevo blog de decoración. Espero me ayudes. Gracias por tus aportaciones. Un saludo

    ResponderEliminar
  8. Disculpa si me funciona poniéndolo en el mismo titulo, pero no en el HTML de la plantilla. Puedes verlo si entras en mi blog de El Rincon Vintage de Karmela. Me gustaría no tener que andar poniéndolo "a mano" en cada post ya que es un icono mio que no va a variar en cada entrada. Espero me digas algo... Gracias de nuevo.

    ResponderEliminar
  9. ¡Gracias! Me ha servido de mucho, tenía tiempo buscando exactamente esto ^^

    PD: Me lleve una de las imágenes de muestras que colocaste, esta muy bonitas :)

    ResponderEliminar
  10. y si quiero poner una imagen distinta al final del titulo en cada titulo! por ejemplo a mis entradas de peliculas ponert un icono de pelicula al final del nombre de la entrada y a los de reseñas un lapiz etc?? se puede?

    ResponderEliminar
  11. ¡Buenos días!

    Consultas pendientes hasta le fecha contestadas aquí:

    http://www.elperrodepapel.com/2015/03/consultoria-blogger-resolviendo-dudas.html

    ¡Muchas gracias y feliz semana!

    ResponderEliminar
  12. Hola!!!
    Necesito ayuda.. no me encuentra ninguno de los dos códigos!
    Gracias.

    ResponderEliminar



¡Anímate a comentar! ♥Tu opinión es muy importante para mí♥



El Perro de Papel es una Marca propiedad de Celia Espada García debidamente registrada en la OEPM, Modalidad M, Número 3527002 (0). Todos los recursos creados por Celia Espada García están correctamente protegidos y vinculados a la autora y no pueden usarse sin consentimiento previo.

Safe Creative #1408270134965
Los derechos de autor y propiedad intelectual del material compartido, tanto gratuitamente como de pago, en esta web y sus redes sociales pertenecen a "El Perro de Papel", exceptuando las referencias a otros creadores, los cuales están debidamente citados en los créditos.