20Abr
Poner una icono en la lista de etiquetas de Blogger
Francisco / Publicado hace 1236 días / 7 ComentariosMe preguntaban como poner un icono al inicio de cada etiqueta en la lista destinada para estas. Bien, la solucción la tiene CSS y funciona para todo tipo de listas.
- Entra a la pestaña “Plantilla” o también llamada “Diseño” desde el escritorio y después a la opción “Edición de HTML”.
- Las listas de etiquetas en blogger estan definidas con la clase “Label1″ (sí se trata de la primera, la segunda será “Label2″ y asi sucesivamente) asi que modificaremos las propiedades de estas listas. Buscamos el siguiente código:
]]></b:skin> - Y justo antes colocamos lo siguiente:
#Label1 li { list-style:none; padding-left: 18px; background: transparent url(http://bp1.blogger.com/_Zuzii37VUO4/Rigu3BN7pYI/AAAAAAAAAlU/nUrCXI295F4/s1600/tag_green.png) no-repeat center left; }Donde el padding esta definido por el tamaño de la imagen, en este caso la imagen es de 16x16px y usamos un padding de 18px para que tenga dos de distancia. En el background (fondo) la url corresponde a la de tu imagen, es este caso es un icono de famfamfam.
Y con esto, automaticamente aparecera ese icono en todas tus etiquetas.
.post-labels {
padding-left: 18px;
background: transparent url(http://bp1.blogger.com/_Zuzii37VUO4/Rigu3BN7pYI/AAAAAAAAAlU/nUrCXI295F4/s1600/tag_green.png) no-repeat center left;
}
no me funcione el codigo… no se que estaré haciendo mal.
corto el código blogger, a ver ..
.post-labels {
padding-left: 18px;
background: transparent url(http://www.tusitio.com/tuimagen.gif) no-repeat center left;
}
Donde en “http://www.tusitio.com/tuimagen.gif” pones la dirección de la imagen que quieres aparesca como icono.
Saludos!
A mi me funciona, pero se come un trocito de la parte superior de la imagen, de hecho en la noticia también te pasa.
Hi.
Si me resulta, pero hay algo que no me gusta: subo mi imagen, la coloco al blog pero se pone un fondo como celeste, por que? a que se debe, no me sale como esta aca, simplemente sale la figura sin el fondo.
Justo quiero cambiarlo, porque el que tengo en mi etiqueta no me gusta mucho.
Bye.
Que tal?
Fox Mulder. Tienes razón en que se come una partecita (al menos desde el IE, desde Firefox se ve bien), lo que se puede hacer es agregar un padding arriba, despues de …”padding-left;”:
“padding-top:5px;”
Pero depende del tamaño de la imagen que uses.
Andrew. Ese fondo que mensionas es debido a un error del IE (raro! ja!) que no acepta la trasparencia en los archivos png, como el que usa la imagen del ejemplo, puedes optar por cambiar esa imagen por una .gif y no tendras problema.
Hola!
Primero daros la enhorabuena por el blog.
Tengo una duda, se puede poner un icono diferente en cada categoría en blogger 2?
Gracias.
No es posible, al menos por este método. Podrías poner manualmente una lista de links y ponerle un link a cada categoría.