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.

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

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.

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).


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

• 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.