English Português

Me 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.

  1. 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”.
  2. 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>
  3. 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.

Escrito por Francisco Oliveros

Soy un gran aficionado del diseño y de todo lo que el código puede comunicar. Ingeniero mecánico por profesión, pero dedicado al desarrollo web a tiempo completo.

Blog / Twitter

Artículos relacionados

Sigue leyendo consejos, tips y tutoriales para tu blog.

    Comentarios

    1. Dr. Fest / Hace 10 años /

      .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.

      Responder a Dr. Fest →
    2. Francisco / Hace 10 años /

      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!

      Responder a Francisco →
    3. Fox Mulder / Hace 10 años /

      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.

      Responder a Fox Mulder →
    4. Andrew / Hace 10 años /

      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.

      Responder a Andrew →
    5. Francisco / Hace 10 años /

      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.

      Responder a Francisco →
    6. Sr. de los Chupetes / Hace 10 años /

      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.

      Responder a Sr. de los Chupetes →
    7. Francisco / Hace 10 años /

      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.

      Responder a Francisco →

    Responder

    ¡Gracias por dejar tu opinión! Por favor procura que tus comentarios estén dentro tema, que no sean promocionales (spam), ilegales u ofensivos, de otro modo, serán borrados. Todos los enlaces serán moderados y la URL indicada NO será enlazada.

    Blog and Web es un blog de Blógstica. Hospedado desde 2008 en Liquid Web.

    Términos de uso - Política de privacidad