Decora los títulos de los post con iconos

9 de julio de 2009 51 comentarios ,
Se dice que una imagen dice más que mil palabras, así que en la lucha por llamar la atención del lector podemos apoyarnos en una imagen y poner un icono en el título de la entrada para acaparar su atención, tal como lo he puesto yo en el título de este post.

Hay dos formas de hacerlo, una es manualmente, y aparecerá sólo cuando tú quieras, en el lugar que quieras y usando diversos iconos.
Y la otra es alterando el código de la plantilla para que aparezcan automáticamente, en un lugar específico y usando siempre el mismo icono.
Veamos pues las dos formas de hacerlo:

La primera, que a mi gusto es la más conveniente, se logra poniendo una línea de código en el título de la entrada. Sólo hay que poner esto dentro del título del post:
<img src="URL del icono" /> TÍTULO DEL POST
Esta línea la puedes poner antes del título como está ahí, al final, o en medio de las palabras. Sólo cambia la URL del ícono por la dirección donde tienes alojada la imagen.

Para la segunda opción entra a Diseño > Edición de HTML, marca la casilla Expandir artilugios y busca esta parte:
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
Y lo sustituyes por esto:
<b:if cond='data:post.url'><img src="URL del icono" />
<a expr:href='data:post.url'><data:post.title/></a>
Eso hará que el icono quede antes del título, si lo quisieras que quede al final entonces deberás sustituirlo por esto:
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/><img src="URL del icono" /></a>
Ten en cuenta que si aplicas este método el mismo icono aparecerá en los títulos de todas tus entradas y siempre será el mismo.
Para cualquiera de los métodos hay que cambiar lo que está en color rojo por la dirección donde está alojado el icono. Si no tienes ningún icono puedes descargar este pack con 1000 iconos para que empieces a decorar los títulos de tus post.

Descargar


51 comentarios en:

" Decora los títulos de los post con iconos "

  1. Excelente bro!!! Ahora estoy haciendo un review... voy a ver si le puedo colocar algún ícono que tenga que ver con el tema.

    Un abrazo!!!

    ResponderEliminar
  2. Esta semana tuviste varios reviews.
    Felicidades!

    ResponderEliminar
  3. Si, es verdad... creo que todo te lo debo a tí. GRACIAS!!!!


    Un abrazo!!!

    ResponderEliminar
  4. Para nada brother, el mérito es todo tuyo.
    Un abrazo.

    ResponderEliminar
  5. JAJAJAJA... quedó muy bueno el ícono!!!

    http://cyberbloggero.com/2009/07/info-electronica-plus-y-conoce-mas.html

    Miralo, justo conseguí el que quería.

    GRACIAS!!!!!

    ResponderEliminar
  6. Bua los iconos estan mortales, acabo de probarlo en mi ultima entrada y si funciona :)

    saludos!

    ResponderEliminar
  7. Cyberbloggero,
    Quedó genial, se ve mucho más representativo y original.
    Un abrazo.

    Mathias,
    Quedó muy bien, en tu caso puedes usar íconos más grandes y no tendrías problemas como el resto de nosotros.
    Saludos.

    ResponderEliminar
  8. pregunta nada que ver xD, sabes como achicar la letra del titulo de la entrada :S?

    ResponderEliminar
  9. WOW QUE BARBARO SE VE DE MARAVILLA, SE VEN MUCHO MEJOR LOS TITULOS
    HAY ALGO MAS QUE SE LE PUEDA HACER CON LOS ICONOS???
    AMO A ESTE BLOG
    NANELO

    ResponderEliminar
  10. Hola Mathias,

    Busca el código que explico en el segundo método, y un poco más arriba verás una línea que dice:
    <h3 class='post-title left'>
    Cambia ese h3 por h4
    Un poco más abajo verás el cierre que dice:
    </h3>
    También cámbialo por h4

    Saludos.

    ResponderEliminar
  11. Hola NANELO,

    Gracias por tus comentarios.
    Lo que se me ocurre que podrías hacer es usar un mismo ícono en el post por cada etiqueta, así cada post estaría identificado por la temática de la etiqueta.

    Saludos.

    ResponderEliminar
  12. Vale ahora si se ve mas normal :)

    saludos!!

    ResponderEliminar
  13. Hay Potro. . . . me encantan tus ideas, es mas , tengo hasta lo que quiero poner. . . . mas a esta abogada, jajajja, no le sale, . . . mi plantilla, no admite muchos cambios, . . . o te parece que soy yo????
    Me das una ayudita

    Gracias, potro, me encanta tu blog, es muy creativo y sumamente útil, aunque no me salga nada, jajaaj

    Anne

    ResponderEliminar
  14. Bien hecho amigo.
    A mi me parece que se veria genial un icono para la edicion especial de mi blog.
    Me imagino que ya tienes una idea de como sera ¿no?

    ResponderEliminar
  15. Ah se me olvidaba.
    ay un problema con uno de mis contadores, tengo el de Histats y el de Google Analytics.
    Pero hoy que cheque mis visitas en el Analytics vi que tenia varias visitas, pero cuando entre a mi blog observe que el contador de Histats estaba en 1 visita.
    ¿Tiene algun error alguno de los dos?

    ResponderEliminar
  16. Hola Anne,

    Muchas gracias por tus comentarios.
    Con gusto te ayudo, pero no me has dicho cuál de los dos métodos no te sale.
    De cualquier modo tu plantilla es una clásica, así que se le puede hacer casi de todo.
    Dime exactamente cuál es el problema para que pueda ayudarte.

    Saludos.

    ResponderEliminar
  17. Hola el venado,

    Ya me imagino qué icono pondrás =P

    No sé qué pueda haber pasado con Histats, pero sí te aseguro que los resultados que tienes en Google Analytics son mucho más fiables.
    El sistema de Analytics es más estable, así que yo no le daría tanta importancia a lo que diga Histats.

    Saludos.

    ResponderEliminar
  18. Anne, esta idea no se le ocurrio a este tio. La vi yo en otros blogs. El potro solo copia trucos.

    JhonnyY.

    ResponderEliminar
  19. Hola JhonnyY,

    En ninguna parte del post dice:
    "Esta es una idea mía" o "juro por mi vida que a nadie más se le había ocurrido".

    Acabando de aclarar esto, gracias por dejar tu opinión.

    Saludos.

    ResponderEliminar
  20. hey JhonnyY!!!!

    Que te pasa??? Por qué vienes a nuestros blogs a dejar comentarios mala onda?

    Este blog nos ha dado mucho. Todos estamos agradecidos con El Potro. Eres el primero en quejarse, y sin motivos. No critiques este blog... aprovéchalo!!!

    ResponderEliminar
  21. Hola por aqui. . .. te dire Yhonny, que la virtud ma grande del ser humano, es saber compartir, . . . quien comparte es generoso, pue no se guarda para si, . . . perfiere , que todos gozemos de esa sabiduria, . . .. tu no tienes porque saberlo, yo soy abogado, y el potro , jamas , ha dicho "yo he inventado, esto", asi que nada malo ha hecho, el solo comparte, todo lo que sabe, lo que le gusta, para que nuestros blogs, se vean bien bonitos, fijate. . . el podria guadarselos!!!,no crees????,
    POtro, tienes todo mi respeto , sigue como hasta ahora.-

    Anne

    ResponderEliminar
  22. Hola Anne,

    Muchas gracias por tus palabras y tu apoyo. La verdad es que la única intención que tengo es la de poder ayudar. Quizá esto tampoco tengas que saberlo, pero de Adsense no he percibido ni un dólar, así que el pago de mi dominio y de los dominios que se sortean salen de mi bolsillo.
    Con esto quiero decir que no hay un fin de lucro detrás de este blog, sino como bien mencionas, el fin es compartir para ayudarnos unos a otros.
    Qué suerte que pocos son quienes piensan como Yhonny, de otro modo sólo unos cuantos podrían tener acceso a la información.

    Nuevamente gracias por tus palabras Anne.
    Saludos.

    ResponderEliminar
  23. Eu fiz aqui no meu blog e deu certinho!!!

    Só que preciso alinhar o ícone ao título do post.
    Como posso fazer isso?

    O tamanho da imagem é 32x32.

    Beijos

    ResponderEliminar
  24. Olá ғ0rgəт▬mə▬n0t,

    Use o seguinte código:

    <img valign="middle" src="image_url"/> título do post

    Beijos!

    ResponderEliminar
  25. hola potro me puedes ayudar
    en mi blog me aparece la cabecera con borde blanco,
    osea la imagen de la cabecera con borde
    me ayudas?
    http://blogiablogger.blogspot.com/
    Gracias!

    ResponderEliminar
  26. Hola Blogio,

    Busca esta parte en tu plantilla:

    /* images */
    img {
    background: #fff;
    border: 1px solid #E5E5E5;

    Elimina la línea que está en negrita y listo.
    Saludos.

    ResponderEliminar
  27. exactamente es esta no?
    /* images */
    img {
    background: #fff;
    border: 0px solid #E5E5E5;
    padding: 5px;
    }

    gracias, te debo una amigo
    saludos!

    ResponderEliminar
  28. yo creo que eres el mejor
    lei tu blog respondones entero me encanta
    gracias
    soy un gran fan tuyo
    salu2!

    ResponderEliminar
  29. Gracias Blogio, me da gusto que te haya servido y que te guste el contenido de este sitio.

    Un abrazo!

    ResponderEliminar
  30. Genial! Ahora, una preg, ¿cómo hago para que en las entradas (tanto en el título como en la entrada misma) la imagen que puse no me quede con un borde? Encima en mi caso es un borde ancho y no queda bien, lo quiero sacar.

    ResponderEliminar
  31. Acá: http://www.recomendamoslibros.com.ar

    ResponderEliminar
  32. Veo dos bordes uno delgado y otro más corto pero más ancho, si te refieres a ese borde ancho busca en tu plantilla esta línea y elimínala:

    border-top:6px solid #3175dc

    ResponderEliminar
  33. No encuentro esa línea.
    Lo más parecido es esto:
    border-top:6px solid $dateHeaderBorderColor}

    ResponderEliminar
  34. Hola Potro me podrias decir como hacer este mismo truco pero en ves de en las entradas del blog q sea en los gatget al lado de las entradas,

    Por Ejemplo asi como muestra esta imagen:
    http://dl.dropbox.com/u/8944635/CiudadBlogger.PNG

    ResponderEliminar
  35. ola super bueno el efecto no ay una forma de colocrle un link cuanod usamos el codigo para todas las entras ? :D gracias x todo

    ResponderEliminar
  36. No sé qué tan bien pueda funcionar un enlace ahí ya que ya tiene el enlace del título, pero puedes probar poniendo esta parte:
    <img src="URL del icono" />

    De esta forma:
    <a href="URL del enlace"><img src="URL del icono" /></a>

    ResponderEliminar
  37. jeje por el titulo de esta misma entrada veo que no es posible ocultar el codigo de la imagen en el titulo del navegador, verdad??

    ResponderEliminar
  38. Con el primer método no, pero con el segundo no debería mostrarse el código de la imagen, ¿ya probaste con ese?

    ResponderEliminar
  39. si, pero queria cambiarla en cada post que haga jeje...
    Igual me viene bien si lo pongo al final del titulo.
    Gracias por el truco!!!

    ResponderEliminar
  40. necesito cambiar el color de los titulos de los post, pues desde la herramienta personalizar ya no me cambia los colores debido a tanta cosa que le hecho :(

    ResponderEliminar
    Respuestas
    1. Hola MetalleriUM, ¿usas una plantilla original de Blogger? Si es así entonces puedes cambiar el color de los títulos de las entradas añadiendo estos estilos:

      h3.post-title a {
      color: #000;
      }

      Eliminar
  41. ¿Es posible añadir uiconos distintos en cada entradas? Por ejemplo para separar los post en distintas categorias asociadas a unos iconos. Por ejemplo. Artículos, Análisis y que cada titulo tengo al lado el icono de la categoría a la que pertenece?.

    ResponderEliminar
    Respuestas
    1. De manera automática no sé, de forma manual sí, usando este mismo método.

      Eliminar
  42. Hola Potro:Que debo hacer para que el icono no aparezca en la página principal o se vea pequeño? Es que sale enorme.Muchas gracias si pudiese arreglarse quedaría muy bonito.
    Lo he implementado de prueba aquí: http://ultreia5.blogspot.com.es/

    ResponderEliminar

Si tu blog contiene material protegido por derechos de autor habilita tu perfil y deja únicamente el nombre de tu blog, no dejes la dirección del mismo, de lo contrario el comentario será eliminado.

Nota: solo los miembros de este blog pueden publicar comentarios.

 
Ir Arriba Ir Abajo
I Ciudad Blogger