Cómo poner un icono en la lista de etiquetas

15.11.14

Hola! Que tal diamantes bellos?
Espero que todo les este saliendo de maravilla!
Antes de iniciar con este tutorial les quiero recordar que la escuelita aun esta abierta por si alguien falta y  quieren participar, pueden ver toda la información aqui 

¡¡ ahora si, Vamos al tutorial!!

Para hacer este tutorial debemos de tener instalado el gadget de etiquetas.

Para instalarlo vamos a Diseño Agregar gadget Etiquetas

En título podemos colocar el nombre que queramos


1. Vamos a etiquetas seleccionadas 
 2. Clic en editar (Esto es para no colocar todas las etiquetas en el blog, debemos de seleccionar las que más importancia tienen.)
3. Clic en Lista *importante!
4. Guardar.

colocar-iconos-etiquetas-blogger
Ya tenemos instaladas las etiquetas en nuestro blog, si vamos a verlas se ven normales y lo que queremos en este tutorial es colocarles un botón para mejorar su aspecto.

Así que copiamos este código:

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

1. Vamos a Plantilla → Editar HTML 

2. Ctrl+f  (para buscar)  y buscamos </b:skin>
3. Pegar antes de </b:skin>  el código que hemos copiado.
***Donde dice URL del botón: debemos de pegar la url de nuestro botón
Y guardamos plantilla
colocar-iconos-etiquetas-blogger

Y listo!! a si de fácil ha sido ;)
*** En  padding-left, Nos indica cuanto espacio colocamos entre el borde izquierdo y las etiquetas
  • Nos quedará así:
Este serial el resultado final ♥

Recomendaciones:
La imagen del botón no debe de ser muy grande, las medidas ideales serian 16x16 hasta  20x20.
Aqui hay algunos iconos

Te  ha gustado este tutorial? Compártelo en las redes sociales

más post bonitos que de seguro te van a interesar

7 comentarios

  1. Un tutorial muy útil! muchas gracias Wendy, un beso.

    ResponderEliminar
    Respuestas
    1. Sii, estas pequeñas cositas hacen los detalles del blog!

      Eliminar
  2. ¡Wendy, qué de cositas bonitas nos estás enseñando! Al final vamos a tener los blogs más cucos de todo el mundo 2.0.

    Muchas gracias por esta nueva lección... ¡Me ha encantado! Y tengo que ponerla en mi blog... algún día... jajajaja...

    ¡Un muackiles!

    ResponderEliminar
    Respuestas
    1. Hola Sonia! Gracias , espero que algún día! jajaja, de tanto tutorial ya no sabe una que poner en el blog!!
      Un abrazooo!!

      Eliminar
  3. ay.. en que sale el codigo ese, se me bloquea la cabeza..jajaa... tendria que haber una especie de manual para novatos de código..jajaja...besicoss

    ResponderEliminar
    Respuestas
    1. Jeje, vamos tu puedes! Ese código se pega en la plantilla de tu blog!

      Eliminar

Gracias por tus comentarios

15.11.14

Cómo poner un icono en la lista de etiquetas

Hola! Que tal diamantes bellos?
Espero que todo les este saliendo de maravilla!
Antes de iniciar con este tutorial les quiero recordar que la escuelita aun esta abierta por si alguien falta y  quieren participar, pueden ver toda la información aqui 

¡¡ ahora si, Vamos al tutorial!!

Para hacer este tutorial debemos de tener instalado el gadget de etiquetas.

Para instalarlo vamos a Diseño Agregar gadget Etiquetas

En título podemos colocar el nombre que queramos


1. Vamos a etiquetas seleccionadas 
 2. Clic en editar (Esto es para no colocar todas las etiquetas en el blog, debemos de seleccionar las que más importancia tienen.)
3. Clic en Lista *importante!
4. Guardar.

colocar-iconos-etiquetas-blogger
Ya tenemos instaladas las etiquetas en nuestro blog, si vamos a verlas se ven normales y lo que queremos en este tutorial es colocarles un botón para mejorar su aspecto.

Así que copiamos este código:

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

1. Vamos a Plantilla → Editar HTML 

2. Ctrl+f  (para buscar)  y buscamos </b:skin>
3. Pegar antes de </b:skin>  el código que hemos copiado.
***Donde dice URL del botón: debemos de pegar la url de nuestro botón
Y guardamos plantilla
colocar-iconos-etiquetas-blogger

Y listo!! a si de fácil ha sido ;)
*** En  padding-left, Nos indica cuanto espacio colocamos entre el borde izquierdo y las etiquetas
  • Nos quedará así:
Este serial el resultado final ♥

Recomendaciones:
La imagen del botón no debe de ser muy grande, las medidas ideales serian 16x16 hasta  20x20.
Aqui hay algunos iconos

Te  ha gustado este tutorial? Compártelo en las redes sociales

Share to Facebook Share to Pinterest

7 comentarios:

  1. Un tutorial muy útil! muchas gracias Wendy, un beso.

    ResponderEliminar
    Respuestas
    1. Sii, estas pequeñas cositas hacen los detalles del blog!

      Eliminar
  2. ¡Wendy, qué de cositas bonitas nos estás enseñando! Al final vamos a tener los blogs más cucos de todo el mundo 2.0.

    Muchas gracias por esta nueva lección... ¡Me ha encantado! Y tengo que ponerla en mi blog... algún día... jajajaja...

    ¡Un muackiles!

    ResponderEliminar
    Respuestas
    1. Hola Sonia! Gracias , espero que algún día! jajaja, de tanto tutorial ya no sabe una que poner en el blog!!
      Un abrazooo!!

      Eliminar
  3. ay.. en que sale el codigo ese, se me bloquea la cabeza..jajaa... tendria que haber una especie de manual para novatos de código..jajaja...besicoss

    ResponderEliminar
    Respuestas
    1. Jeje, vamos tu puedes! Ese código se pega en la plantilla de tu blog!

      Eliminar

Gracias por tus comentarios