14

Imagen antes del título de las entradas

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.

Entradas Relacionadas:

14 comentarios:


jaad

Linda Rosa,permíteme que te llame así, pero ahora mismo estoy tan emocionado por una nueva utilidad que ofreces en tu blog (en utilidades online, ese menú desplegable)que doy saltos de alegría por lo bien que queda y por lo funcional que resulta. Si estuvieses frente a mi te daba un largo abrazo. Como no puedo, entonces dejo este comentario con la algarabía de un niño. Gracias!!!

Anónimo

jaad, que impetu!!!:D
Gracias!!!

Anónimo

Cuando me muda (¿Lo lograré?) y yo sea yo, me he propuesto crear un blog de prueba para probar toooodas las chucherías maravillosas que nos enseñas con tanta paciencita y amor... Probablemente me saldrán churros, pero como soy más terca que una burra echada, pos quién quita y un día sea capaz, no?

Besototototototes, apañá!!!!

PD) Se me ocurrió otra cosa para lo que te consulté por email sobre el archivo de voz, y es subirlo a Youtube y enviármelo, pero -otra vez- habrá q esperar a que yo vuelva a ser yooooo =oD

Mareah

Rosa, aquí yo molestando con mis cosas locas musicales....
A ver si sería posible en la parte lateral del blog colocar una foto y pinchando en ella escuchar un audio.
La foto podría ser de esos sitios que se suben? y el audio esta en una direccion http.
Muchas gracias por tu tiempo y saludos

lichazul

rosa por favor ayudameeeee
trato de poner la imagen
http://img140.imageshack.us/img140/5681/977avataray8.gif

la cual recorto para que quede de la misma forma que la tuya escrita

http://img140.imageshack.us/img140/5681

para luego agregar
/preview16x16xt5.png"/>

y no me resulta ...me sale la ranita del sitio ,porfis ayudameeee


te dejo mi blog para que me avises si s epuede

www.lichazul.blogspot.com

un abracito desde ya y las gracias eternas:-)

elisa

Anónimo

Elisa, no tienes que recortar nada...la url que yo he puesto es solamente de ejemplo, tu tienes que poner la tuya completa sustituyendo a la mia, entre los paréntesis.

Paco

Hola Rosa,

Mirando por tu blog para ver si habias puesto otra cosa he encontrado esto que me parece curioso y quizá utilice, aunque no quiero sobrecargar demasiado el blog. Pero lo que estaba buscando es cambiar el icono que sale en la barra de direcciones del blog. Que en vez de salir la "e" del explorer salga un icono personalizado. Lo he visto en otro sitio y ponía que introduciendo esta línea en la plantilla se conseguiría <LINK REL="SHORTCUT ICON" HREF="http://www.yourwebsite.com/favicon.ico" />
¿podrías contarnos algo al respecto?.

Gracias.

Anónimo

Paco, heces muy bien en no cargar demasiado el blog, a veces ponemos cosas solo porque nos parecen bonitas y no se trata de eso, más bien han de ser útiles y centrar nuestro esfuerzo en un buen contenido...

Esa imagen de la que hablas, se llama Favicón, y puedes ver como ponerla aquí.

Anónimo

Una vez más...¡gracias mil Rosita linda!

me ha costado unas cuantas horitas jajajjaj descubrir según mi plantilla dónde estaba ese trozo de comando ¡pero lo logré! jeje! dura que tengo la cabeza.

ha quedado muy chulo! ya también puse la letra de revista y bueno! como ves no me encojo a pesar de que a veces me ocurran catástrofes!!

por cierto, gracias por pasarte por mi blog en mi socorro, eres un solazo!

besos guapísima!!

Anónimo

Mary Lovecraft , ya he visto la ranita verde ja,ja...¿o es un sapito? :-)

Anónimo

entre ranita y sapito jajajja más bien renacuajo con patas y cola, ¿no? xd xd xd

yo lo veía más bien como dinosaurio pero la idea de la ranita o sapo me gustó :D

otro beso guapa y gracias por pasarte por mi blog, tienes un altar allí, ya lo sabes ;)

Mara

Hola Rosa, lo he puesto en mi blog con tu primer opcion, ha quedado perfecto

Ahora como hago para separarlo del texto?
Desde ya gracias!

Anónimo

Mara En .post h3 {
añades padding-left: 20px; o la distancia que sea desde la izquierda, y si es desde la derecha pues añades padding-right: 20px; o ambas...

Mara

No funciona Rosa, he puesto una, he puesto las dos y no pasa nada.

Gracias por responderme, lo dejare asi.
Besos

Publicar un comentario

Si vas a dejar una consulta, procura tener habilitado tu perfil en Blogger o deja la url del blog a revisar (no enlace).

Los comentarios están siendo moderados.

:) :(( :( :P :D :$ ;) :I :X :O |O :S