Etiquetas con icono

Usando el CSS, podemos mostrar nuestra lista de etiquetas con un icono delante de cada una de ellas.
1- En primer lugar añadiremos las etiquetas al blog, (si no las tenemos ya añadidas).
2- En el CSS de nuestra plantilla añadimos este trozo de código:
#Label1 li {
list-style:none;
padding-left: 30px;
background: transparent url(URL DE NUESTRO ICONO) no-repeat center left;
}
En "padding-left" he puesto 30px, esa es la distancia del icono al texto, vosotros tenéis que modificarla en función del tamaño del icono, si vais a usar el mio, con 30px quedará perfecto.

Y así se verá:


Esta es la url de mi icono por si queréis usarlo:
http://img526.imageshack.us/img526/7028/taggreenoe1.png

Nota
Se puede usar este sistema para cualquier lista, por ejemplo, si queremos añadir un icono a una lista de links, añadimos el nuevo elemento de links en la plantilla y añadimos en el CSS de la plantilla lo mismo de arriba pero cambiando Label1 li por LinkList1.

En Blogger se pueden añadir listas e incluso las etiquetas, varias veces, por lo que cada vez que queramos cambiar el icono en una nueva lista, pegaremos de nuevo esta porción de CSS, modificando LinkList1 por LinkList2, o Label1 por Label2, y así sucesivamente.

0 comentarios:

Publicar un comentario