-->

martes, 5 de junio de 2007

Poner una imagen delante de "Publicado por", "Comentarios" y "Etiquetas" .

Me preguntaba Annie en el BlogRoll cómo hacer para poner una imagen antes de donde dice "Publicado por", "Comentarios" y "Etiquetas". Pues bien, los pasos a seguir son los siguientes:

Antes que nada deciros que en FamFamFam.com teneis multitud de mini-iconos para elegir, ya que lo primero será decidir qué imagen quereis poner delante de cada texto. Una vez la tengais decidida la subís a Imageshak para obtener su URL. (Ya sabeis: Examinar / Host it / y la URL que usaremos será la última, que dice Direct Link To Image).

Ahora que ya tenemos las imágenes seleccionadas haremos lo siguiente:

1. Accedemos a Plantilla / Edición de HTML. Buscamos ]]></b:skin> y a continuación (o antes, depende de la plantilla que useis. Probad de las dos maneras) pegamos los siguientes códigos en función de donde queramos añadir la imagen:


IMAGEN DELANTE DE "PUBLICADO POR"


.post-author
{

padding-left:20px;
padding-top:5px;
background: url(URL DE LA IMAGEN) center left no-repeat; }



IMAGEN DELANTE DE "COMENTARIOS"

.comment-link
{

padding-left:20px;
padding-top:5px;

background: url(URL DE LA IMAGEN) center left no-repeat; }




IMAGEN DELANTE DE "ETIQUETAS"

.post-labels
{
padding-left:20px;
padding-top:5px;
background: url(URL DE LA IMAGEN) center left no-repeat; }



Guardamos cambios y listo.

12 comentarios:

Anónimo dijo...

en su día lo puse pero el iconito de comentarios se me colocaba encima del numero de comentarios.
Lo hice al principio, cuando aun no os conocía... probaré a ver si con vuestro truco no me pasa

gracias

Anónimo dijo...

muchax grax f5 enseguida lo voy a probar y te digo como me kedo..cada vez tu blog m eayuda max..muchas grx

Curroide dijo...

Efecinco, quería preguntarte sobre un problemilla que tengo con las mejoras de mi blog, aunque no tiene que ver con este post (siento salirme del tema... pero tampoco sabía exactamente donde consultártelo :S).

Verás, he colocado los enlaces a redes sociales para que salgan en cada post, siguiendo los pasos que dijiste en una de tus entradas, pero no sé que pasa que en la página principal del blog, si te fijas, en los posts de más abajo se va desplazando hacia la derecha toda esa línea en la que están los iconos. Así hasta que en el último que aparece se divide en dos y continúa en la línea siguiente O_o He probado quitando las tags de Technorati, pero le pasa lo mismo, así que no sé... ¿Sabrías decirme si añadiendo algún comando determinado se quedaría en el sitio, centrado? ¿o cómo alinearlo a la izquierda y que no se fuera a la derecha?

Gracias de antemano! ^^

Anónimo dijo...

pos ia lo hice f5 y me resulto de maravilla..jaja.muchax grax..aki te pongo otro datito por si te interesa..xD

poner fotis antes de la fecha:

Panel/Diseño/Plantilla/Edición de HTML

Buscaremos lo siguiente:

/* Posts
-----------------------------------------------
*/
h2.date-header {
margin:1.5em 0 .5em;
}

En su lugar añadiremos:

/* Posts
-----------------------------------------------
*/
h2.date-header {
padding-left:20px;
padding-top:35px;
background: url(aquí la url de la imagen) center left no-repeat;

(En padding-top podéis variar el valor y mirar en vista previa para ver la distancia entre la imagen y la fecha)

Manson dijo...

M ESTA PASANDO COMO A VOS DE QUE APARECE LA IMAGEN DE IMAGESHACK EN LUGAR DE LO UCONOS DE DIGG Y MENÉAME Y AHORA TAMBIEN EN EL ICONO DE ETIQUETAS COMO PUSISTE VOS PERO QUE TODAVIA LO TENES BIEN
¿QUE TA PASANDO?????
SLDS
http://elrinconmanson.blogspot.com/

Anónimo dijo...

Hola! Tengo un problema con estos codigos, y es que el icono de comentarios me sale en la linea del autor...

Como puedo corregirlo?

Gracias

Mi blog es www.chanantechanante.blogspot.com

Anónimo dijo...

queria agradecerte por la grandisima que tu blog me esta dando.

Saludos.

Anónimo dijo...

Hola F5 esto de las imagenes antes de los titulos me ha ido perfecto, ahora me gustaria poner una antes del Permalink y tambien me gustaria saber como cambiar el texto de Permalink, ah! y otra cosa si es posible cambiar el icono de ese sobre para que recomeiden esa entrada.

Saludos, Jaume, y gracias desde Palma de Mallorca, Baleares, España

Anónimo dijo...

gracias me ayudastes mucho

wedding dress dijo...

tall individual cheap prom dresses then the lengthy and slender dress would fit bridesmaid dresses under $100 you quite well. The mother of bride dress design will help to give cheap wedding dress your body a contour when  Brautjunferkleider men are checking you out.plus size evening dresses The lengthy skirt cheap prom dresses style is also much more cheap prom dresses appropriate to be worn in a formal night Yahoo wedding dresses due to the fact showing a great deal of lace wedding dress skin is regarded bridesmaid dresses as inappropriate.

jiaxin dijo...

Now the junior bridesmaid dresses are very

popular. Don't look down the flower girls. They will bring more interesting atmosphere to your wedding. You could

choose the black junior bridesmaid dresses

and
chiffon junior bridesmaid dresses
for these lovely angles. We have different kinds of jr bridesmaid dresses supply.
wedding dresses two in one
two wedding dresses in one
convertible wedding dresses

Marta Villanueva San Miguel dijo...

Hola: por más que he intentado cambiar los imagenes de autor, comenterios...etc, no lo he conseguido y esto empieza a ser desesperante. Mi blog es una plantilla de Btemplares (love in the air), por si te sirve de ayuda, un saludo y por favor AYUDA.

 
Copyright © 2007 | Diseñado por BlogyWeb