Como cambiar las viñetas por defecto de nuestro blog


Algo que cambie no hace mucho y que tenia muchas ganas de hacer, las viñetas de las listas.
Se que es algo que quizás no tiene importancia, pero es que las viñetas que salen por defecto no me gustan, así que decidí investigar un poco para conseguir cambiarlas.







Para que me entendáis, en blogger igual que en word tenemos la opción de poner una lista, ya sea con números o con viñetas.



En este caso, vamos a cambiar las viñetas, las listas con números se quedarán igual.

Si no has modificado nada de tu blog, lo normal es que las viñetas aparezcan de la siguiente forma:


Lo que vamos a hacer con este tutorial es que las viñetas aparezcan con una imagen. En mi caso, como he añadido una imagen con una cruz verde mis viñetas aparecen así:


Yo escogí la viñeta que más le pegará a mi blog, como cada una tiene un blog con colores diferentes, os he dejado al final de este post un archivo con diferentes imágenes para utilizar como viñetas. Aún así, si quieres puedes crear tu propia imagen para la viñeta. Recomendación:

  • La imagen que utilices procura que sea de unos 14px x14px
  • No utilices dibujos muy trabajados o fotografías porque no se verá bien, escoge formas simples, estrellas, círculos, cuadrados, flechas...

 ¡Vamos a ello!







En primer lugar, tanto si creas tu propia imagen como si utilizas las que yo te facilito al final de este post, debes subirla a tu álbum picasa para así obtener la dirección de imagen. 

Así que ves a tu picasa y inicia sesión si no lo has hecho ya, o accede a través de tu google+. Si no has pasado por picasa nunca, verás que ahí es donde se almacenan todas las fotos que utilizas para tu blog, yo de vez en cuando hago limpieza :)

Bien, escoge una foto y selecciona subir fotos:



Se te abrirá una ventana donde añadir la viñeta que hayas escogido o que hayas creado. Una vez seleccionada se subirá automáticamente, cuando acabe pulsa listo, y después omitir (si no quieres compartir la viñeta en tu goggle+).

Ya tenemos la imagen subida, así que ahora vamos a por la dirección de la imagen :)

  • Ves al álbum donde has subido la imagen
  • Haz clic encima de la imagen para que se te habrá
  • Haz clic con el botón derecho encima de la imagen 
  • Selecciona 'Copiar URL de imagen'




¡Ya tenemos copiada la dirección!








Ahora vamos a la parte del código :)

Bien, ves a blogger al apartado Plantilla -- Personalizar -- Avanzado -- Añadir código CSS

Ahora añade lo siguiente:

ul {
   margin:0;
   padding-left: 1.5em;
   line-height: 1.5em;

 list-style-image: url(Direccion de tu imagen); }


Ahora sustituye el texto 'Dirección de tu imagen' por la dirección  de imagen que hemos copiado antes, ¡y ya lo tienes!




Ha sido fácil ¿no?

Os facilito algunas imágenes que podéis utilizar para cambiar las viñetas de vuestro blog:




Puedes escoger la imagen que mejor vaya con tu blog, aquí te dejo algunos ejemplos de como pueden quedar tus listas con mis imágenes:

Corazones:


Flechas:


Mariposas:





¿Te ha resultado fácil el post? Espero que sí....
Besos Clau




13 comentarios:

  1. Muchas gracias!! La verdad es que estas viñetas son muchísimo más bonitas!!
    Bsitos!

    ResponderEliminar
    Respuestas
    1. jiji siiii, me gustan más los corazones, que le vamos a hacer!! jijij

      Eliminar
  2. Qué guay! no sabía que se podían cambiar las viñetas!! Yo cogía un corazoncito y lo pegaba... jaja (que cutre, pero efectivo!)

    un besazo y gracias por enseñarnos cositas tan guayyyys!

    Nuestro blog: Con la realidad en los talones

    ResponderEliminar
    Respuestas
    1. Al final da igual, la cuestión es encontrarlo y aplicarlo, que ya es mucho! Ahora ya conoces dos formas de hacerlo! jijiji
      graciassss

      Eliminar
  3. Qué chulo!!! Me lo apunto para ponerme con ello en cuanto tenga un ratito, que queda fenomenal.

    Besos y feliz semana!

    ResponderEliminar
    Respuestas
    1. Me alegro que te guste victoria!! Me hará ilusion verlo en tu blog! jijiji
      besos
      PD. genial el tuto de carvado de sellos, yo tb estoy con ello, aunque ya no llego al desafio...otra vez sera! jijiji

      Eliminar
  4. Muchísimas gracias, como siempre, por esta información tan interesante.

    ResponderEliminar
    Respuestas
    1. Gracias Irene, que por cierto, vaya colección de regalos te has llevado en madresfera...que fuerte! Cada vez que leía Irene More, pensaba, no puede ser!! jajajaja
      Besos

      Eliminar
  5. Hola:
    Antes de nada muchas gracias por tu tiempo, no se si me podrás ayudar.
    Llevo toda la tarde intentando cambiar las viñetas y no me sale.
    Lo pongo aquí:
    Plantilla-Personalizar-Avanzado-Añadir CSS
    El código me queda así:
    ul {
    margin:0;
    padding-left: 1.5em;
    line-height: 1.5em;

    list-style-image: url(http://www.websitebullets.com/bullet/308/5.gif); }

    Un saludo

    ResponderEliminar
    Respuestas
    1. Enviame un mail a klaudisseny@gmail.com y hablamos, necesito algo más de info :)
      besos

      Eliminar
  6. me funcionó muy bien perfecta la explicación nada que reclamar :)

    ResponderEliminar
  7. Por que a mi no me funciona? :c Ya intente muchos tutoriales, colocando el código en HTML y en CSS y no funciona

    ResponderEliminar
  8. Me encantaría poder personalizar las de mi blog, pero alternando dos imágnenes distintas, cómo podría hacerlo. Además no quiero que se me apliquen esos estilos siempre, sino elegir yo en qué entradas. ¿Cómo se podría hacer?

    ResponderEliminar

Gracias por decir la tuya :)