Tutoblog para ti #14: Colocar iconos en la lista de etiquetas.

domingo, 3 de julio de 2016

¡Holaa lectores! Hoy les traigo un tutorial que apliqué hace poquito en mi blog y se trata de agregar iconos o imágenes pequeñas al lado de cada etiqueta en la lista de etiquetas.
Es bastante sencillo y bonito, por lo que espero que les guste el tutorial y les resulte de utilidad...


 Paso 1:
Deben dirigirse a Diseño Agregar gadget Etiquetas.

 Paso 2:
Es importante que el gadget de etiquetas esté configurado como Lista para que los iconos aparezcan.
Una vez configurado el gadget de etiquetas deben Guardar.
 Paso 3:
*Deben dirigirse a PlantillaEditar HTML.
*Con Ctrl + F (buscador), deben buscar→ </b:skin>
*Antes de </b:skin> deben pegar el siguiente código:

#Label1 li {
list-style:none;
padding-left: 18px;
background: transparent url(URL de tu botón) no-repeat center left;
}

*Donde dice URL del botón deben pegar la url de la imagen que quieren poner.
*Una vez hecho esto hacen clic en Guardar plantilla.
Recomendación:
La imagen que vallan a poner no debe ser muy grande, puede ser entre 16x16 hasta 20x20.
Hay varias páginas que tienen iconos descargables de estos tamaños pero en lo personal no me había gustado ninguno, por lo que diseñé un favicon (tutorial AQUÍ), descargué la imagen  y copié la URL.
A continuación les dejaré algunos iconos para que copien su URL si les gusta (solo deben hacer clic derecho sobre la imagen y copiar la dirección de ésta):







Hasta aquí llegaron el tutorial de hoy, espero que les haya gustado  y resultado de su utilidad, el próximo domingo subiré otro tutorial, el cual ustedes deben eligir mediante una votación (Gadget de votación titulado "Tutoblog #15", en la parte superior del blog).

 Si no quieren perderse nada, recuerden suscribirse y seguirme en mis redes sociales.
¡Un abrazo literario!

16 comentarios:

  1. Hola Antonella,
    Mil gracias por el tutorial, me gustó mucho y es súper fácil de hacer.
    Quería preguntarte, ya que hiciste un tutorial sobre las etiquetas, si tú sabrás como hacer que las etiquetas se conviertan en un menú desplegable en vertical. He buscado por todos lados cómo hacerlo, pero no logro conseguir el css que me permita personalizarlo a mi gusto.
    Deseo poder hacer menús verticales para colocarlo como un gadget y clasificar las reseñas por autor o género con esta opción y no he podido.
    Gracias de antemano por la ayuda y sigue con los tutoriales que son muy útiles.
    ¡Besitos 💛!

    ResponderEliminar
    Respuestas
    1. Holaa, ahora mismo me pongo a buscar códigos para poder pasártelos!
      Espero poder ayudarte :)
      Muchas gracias por comentar!
      Saludos 💛

      Eliminar
  2. Me encanto el tutorial... Esta fácil y práctico...Cuando lo puedo lo pondré en práctica..Gracias por compartircon nosotros estas cosas *-*..

    ResponderEliminar
    Respuestas
    1. Holaa, gracias a ti por leer y compartir tu opinión sobre este tutorial *-*
      Besos 💛

      Eliminar
  3. Hola. Este es un tutorial bastante bonito. Yo no tengo puestas las etiquetas pero si algún día las pongo pondré algo así para decorar :)

    ResponderEliminar
    Respuestas
    1. Holaa, que bueno que te haya gustado el tutorial!
      Un beso 💛

      Eliminar
  4. Hola!
    Muchas gracias por el tutorial, me gusta el lindo resultado que queda.
    Besos

    ResponderEliminar
    Respuestas
    1. Holaa, que bueno que te haya gustado el tutorial!
      Un besote Isable ;)

      Eliminar
  5. ¿Cuántas veces tengo que decir que amo tus tutoriales? Ojalá pueda poner pronto los que quiero en práctica <3

    ¡SE MUUUUUUUUUUUY FELIIIIIIIIIIIIIIIIIIIIZ! :):)

    ResponderEliminar
    Respuestas
    1. Dilo todas las veces que quieras que me hace muy feliz jajaja
      Muchas gracias por siempre leer y comentar mis entradas!
      Un beso enoooorme!

      Eliminar
  6. Me ha encantado el tutorial, lo tendré en cuenta para alguna entrada.
    un saludo
    cdc

    ResponderEliminar
    Respuestas
    1. Holaa, que bueno que te haya gustado el tutorial!
      Saludos :D

      Eliminar
  7. Es la primera vez que veo este tipo de publicaciones en un blog, me encantó! Es super útil, hay tantas cosas que se pueden hacer y uno ni enterado. Voy a estar pendiente de las próximas publicaciones. *-* Saludos!

    ResponderEliminar
    Respuestas
    1. Holaa que bueno que esta publicación te haya parecido útil!
      Un saludo 👅

      Eliminar
  8. Hola!!! muy buen tutorial, solo tengo un problemita, no se donde hacer esa lista para seleccionar las lista que quiero hacer :( me podrías ayudar?
    Muchas gracias de antemano :)

    ResponderEliminar
  9. Huola!

    Me ha encantado, pero tengo una duda.

    Me gustaría poner iconos, en vez de en etiqueta, en los títulos de los gadgets como hacen otros blogs, podrías decirme cómo???

    Mi blog, por si quieres visitarlo: librosjuveniles-aleersehadicho.blogspot.com

    ResponderEliminar

¡Hola lectores!
Si amas ♥ el olor a libro como yo, no puedes irte
sin antes dejar un comentario
¡Siempre los devuelvo!
Por favor evita hacer spoilers y que prevalezca el
respeto ante todo.
♥ Tu opinión es muy importante para mí♥

Santa Template by Mery's Notebook © 2014