Cómo personalizar las viñetas de Blogger

¿Que son las viñetas? Son esas cosas circulares que están al lado izquierdo de las listas que creamos en el blog. Estas curiosas y nada atractivas viñetitas están por defecto en las platillas de Blogger, y es muy fácil personalizarlas.

Ejemplo de Lista con viñetas personalizadas:

• Lorem ipsum dolor sit amet, consectetur adipiscing elit.
• Aptent placerat laoreet orci, cubilia proin pellentesque cursus, nisl at.
• Vitae risus euismod nostra ullamcorper id, nec volutpat natoque.
• Neque mauris taciti auctor dignissim montes, pellentesque porta aliquet.
• Augue himenaeos dui consequat imperdiet natoque, class bibendum neque.

Pues bien comencemos con el PASO a PASO

Viñetas sin imagen (cambiar una viñeta por otra)

1. Desde la opción Tema de Blogger, clic en el botón  Personalizar 
2. Clic en Opciones avanzadas y buscamos Agregar CSS.
3. Copia y pega el siguiente código. Clic en  Aplicar al blog 

Código: Circle

/* Viñetas Circulares ----------------------------------------------- */ .post ul { list-style: circle; margin: 10px 0 0 20px; padding: 0; } .post ul li { margin: 0; padding: 0 0 0 10px; }

Código: Square

/* Viñetas Cuadradas ----------------------------------------------- */ .post ul { list-style: square; margin: 10px 0 0 20px; padding: 0; } .post ul li { margin: 0; padding: 0 0 0 10px; }

Viñetas con imagen

1. Desde la opción Tema de Blogger, clic en el botón  Personalizar 
2. Clic en Opciones avanzadas y buscamos Agregar CSS.
3. Copia y pega el siguiente código. Clic en  Aplicar al blog 

/* Viñetas con Imagen ----------------------------------------------- */ .post ul { list-style: none; margin: 10px 0 0 20px; padding: 0; } .post ul li { background:url(#) top left no-repeat; margin-left:-25px !important; padding:0px 10px 3px 20px; }

Nota:

• También se puede cambiar las viñetas la columna latera,  sólo cambia  .post ul {  y  .post ul li {  por .sidebar ul { y .sidebar ul li {
• Si vez que la viñeta no está bien ubicada (muy lejos o muy cerca al texto) es porque cada plantilla es diferente, así que sólo debes modificar los valores de padding y margin.