Personalizar viñetas en Blogger

Las viñetas corresponden a texto separado entre líneas, las cuales se identifican con la etiqueta <ul> y cada línea en las viñetas se determinan mediante <li>.

Estas son viñetas normales:

• Lorem 1


• Ipsum 2


• Lipsum 3

Podemos personalizar el ícono que se encuentra en la parte izquierda del texto, o bien personalizar las posiciones, espaciados, etc.

¿Cómo personalizar las viñetas?

Es necesario que sepas, que es posible definir el tipo de viñeta con el atributo list-style, el cual posee varios tipos y detallaremos y ejemplificaremos cada uno de ellos.

Estos son los tipos de viñetas que existen de manera genérica en CSS:

• disc


• circle


• square


• decimal


• lower-roman


• upper-roman


• lower-alpha


• upper-alpha


• none

Tipos de viñetas:

Disc: Esta es la viñeta genérica, corresponde a la que es utilizada por defecto en el navegador, es un círculo con un área oscura:

• Lorem 1


• Ipsum 2


• Lipsum 3

Circle: Esta viñeta al igual que disc es un círculo, pero ésta no posee un área, sólo es un contorno.

• Lorem 1


• Ipsum 2


• Lipsum 3

Square: Esta corresponde a un cuadrado con un área oscura:

• Lorem 1


• Ipsum 2


• Lipsum 3

Decimal: Esta viñeta corresponde a líneas enumeradas con números decimales:

• Lorem 1


• Ipsum 2


• Lipsum 3

Lower-Roman: Enumeración en números romanos en minúsculas:

• Lorem 1


• Ipsum 2


• Lipsum 3

Upper-Roman: Enumeración en números romanos en mayúsculas:

• Lorem 1


• Ipsum 2


• Lipsum 3

Lower-Alpha: Orden alfabético en minúsculas:

• Lorem 1


• Ipsum 2


• Lipsum 3

Upper-Alpha: Orden alfabético en mayúsculas:

• Lorem 1


• Ipsum 2


• Lipsum 3

None: Sin viñetas:

• Lorem 1


• Ipsum 2


• Lipsum 3

Además de los tipos de viñetas genéricas, es posible usar imágenes gracias al atributo URL.

Definiendo las viñetas de las entradas:

Para aplicar el tipo de viñeta en las entradas es necesario que crees la síntaxis básica CSS:

.post ul li {
list-style:
}

En el valor list-style, deberás escoger algún tipo de viñeta, veamos un ejemplo:

.post ul li {

list-style: square;

}

Como se puede apreciar, he utilizado el tipo square (Cuadrado).

Usando imágenes:

Para definir una imagen como viñeta, se puede hacer gracias al siguiente patrón:

list-style-image:url(URL-DE-LA-IMAGEN);

Ejemplo de la síntaxis:

.post ul li {
list-style-image:url(URL-DE-LA-IMAGEN);
}

Resultados:

• Lorem 1


• Ipsum 2


• Lipsum 3

• Lorem 1


• Ipsum 2


• Lipsum 3

Importante:

• Recuerda que los atributos CSS que crees, siempre van antes de ]]></b:skin>.


• Para personalizar todas las viñetas (No sólo las de las entradas) elimina la línea .post en el selector.