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 POSTEsta 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'>Y lo sustituyes por esto:
<a expr:href='data:post.url'><data:post.title/></a>
<b:if cond='data:post.url'><img src="URL del icono" />Eso hará que el icono quede antes del título, si lo quisieras que quede al final entonces deberás sustituirlo por esto:
<a expr:href='data:post.url'><data:post.title/></a>
<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.
Ciudad Blogger
Excelente bro!!! Ahora estoy haciendo un review... voy a ver si le puedo colocar algún ícono que tenga que ver con el tema.
ResponderEliminarUn abrazo!!!
Esta semana tuviste varios reviews.
ResponderEliminarFelicidades!
Si, es verdad... creo que todo te lo debo a tí. GRACIAS!!!!
ResponderEliminarUn abrazo!!!
Para nada brother, el mérito es todo tuyo.
ResponderEliminarUn abrazo.
JAJAJAJA... quedó muy bueno el ícono!!!
ResponderEliminarhttp://cyberbloggero.com/2009/07/info-electronica-plus-y-conoce-mas.html
Miralo, justo conseguí el que quería.
GRACIAS!!!!!
Bua los iconos estan mortales, acabo de probarlo en mi ultima entrada y si funciona :)
ResponderEliminarsaludos!
Cyberbloggero,
ResponderEliminarQuedó 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.
pregunta nada que ver xD, sabes como achicar la letra del titulo de la entrada :S?
ResponderEliminarWOW QUE BARBARO SE VE DE MARAVILLA, SE VEN MUCHO MEJOR LOS TITULOS
ResponderEliminarHAY ALGO MAS QUE SE LE PUEDA HACER CON LOS ICONOS???
AMO A ESTE BLOG
NANELO
Hola Mathias,
ResponderEliminarBusca 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.
Hola NANELO,
ResponderEliminarGracias 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.
Vale ahora si se ve mas normal :)
ResponderEliminarsaludos!!
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????
ResponderEliminarMe das una ayudita
Gracias, potro, me encanta tu blog, es muy creativo y sumamente útil, aunque no me salga nada, jajaaj
Anne
Bien hecho amigo.
ResponderEliminarA 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?
Ah se me olvidaba.
ResponderEliminaray 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?
Hola Anne,
ResponderEliminarMuchas 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.
Hola el venado,
ResponderEliminarYa 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.
Anne, esta idea no se le ocurrio a este tio. La vi yo en otros blogs. El potro solo copia trucos.
ResponderEliminarJhonnyY.
Hola JhonnyY,
ResponderEliminarEn 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.
hey JhonnyY!!!!
ResponderEliminarQue 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!!!
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????,
ResponderEliminarPOtro, tienes todo mi respeto , sigue como hasta ahora.-
Anne
Hola Anne,
ResponderEliminarMuchas 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.
Eu fiz aqui no meu blog e deu certinho!!!
ResponderEliminarSó que preciso alinhar o ícone ao título do post.
Como posso fazer isso?
O tamanho da imagem é 32x32.
Beijos
Olá ғ0rgəт▬mə▬n0t,
ResponderEliminarUse o seguinte código:
<img valign="middle" src="image_url"/> título do post
Beijos!
hola potro me puedes ayudar
ResponderEliminaren mi blog me aparece la cabecera con borde blanco,
osea la imagen de la cabecera con borde
me ayudas?
http://blogiablogger.blogspot.com/
Gracias!
Hola Blogio,
ResponderEliminarBusca esta parte en tu plantilla:
/* images */
img {
background: #fff;
border: 1px solid #E5E5E5;
Elimina la línea que está en negrita y listo.
Saludos.
exactamente es esta no?
ResponderEliminar/* images */
img {
background: #fff;
border: 0px solid #E5E5E5;
padding: 5px;
}
gracias, te debo una amigo
saludos!
yo creo que eres el mejor
ResponderEliminarlei tu blog respondones entero me encanta
gracias
soy un gran fan tuyo
salu2!
pd: me funciono a la perfección.
ResponderEliminarGracias Blogio, me da gusto que te haya servido y que te guste el contenido de este sitio.
ResponderEliminarUn abrazo!
gracias
ResponderEliminarsi sirve gracias
ResponderEliminarGenial! 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¿En cuál blog lo has puesto?
ResponderEliminarAcá: http://www.recomendamoslibros.com.ar
ResponderEliminarVeo 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:
ResponderEliminarborder-top:6px solid #3175dc
No encuentro esa línea.
ResponderEliminarLo más parecido es esto:
border-top:6px solid $dateHeaderBorderColor}
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,
ResponderEliminarPor Ejemplo asi como muestra esta imagen:
http://dl.dropbox.com/u/8944635/CiudadBlogger.PNG
Claro, en esta entrada se explica cómo hacerlo.
ResponderEliminarola super bueno el efecto no ay una forma de colocrle un link cuanod usamos el codigo para todas las entras ? :D gracias x todo
ResponderEliminarNo sé qué tan bien pueda funcionar un enlace ahí ya que ya tiene el enlace del título, pero puedes probar poniendo esta parte:
ResponderEliminar<img src="URL del icono" />
De esta forma:
<a href="URL del enlace"><img src="URL del icono" /></a>
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??
ResponderEliminarCon el primer método no, pero con el segundo no debería mostrarse el código de la imagen, ¿ya probaste con ese?
ResponderEliminarsi, pero queria cambiarla en cada post que haga jeje...
ResponderEliminarIgual me viene bien si lo pongo al final del titulo.
Gracias por el truco!!!
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 :(
ResponderEliminarHola 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:
Eliminarh3.post-title a {
color: #000;
}
¿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?.
ResponderEliminarDe manera automática no sé, de forma manual sí, usando este mismo método.
EliminarHola 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.
ResponderEliminarLo he implementado de prueba aquí: http://ultreia5.blogspot.com.es/
Ya lo he conseguido!!!Gracias de todos modos
Eliminar