Lista con viñetas personalizada

Cuando redactamos una de nuestras entradas y usamos la lista de viñetas , si en nuestra plantilla no hay ningún código especifico para ellas, Blogger las mostrará así por defecto:

Para personalizar las viñetas en las listas de nuestros post y que se muestre un icono escogido por nosotros, delante de cada una, usaremos el CSS.
Iremos a la parte del HTML de nuestra plantilla y buscaremos la parte del CSS que se ocupa de las entradas:
/* Posts
----------------------------------- */

Y en esa zona, o debajo de esto mismo colocamos el código necesario para personalizar nuestras listas de viñetas:


.post ul {
list-style:none;
margin:0 0 1.25em;
padding:0 0px;
}

.post ul li {
background:url("http://www.mena.com.mx/gonzalo/iconos/14x14x4/img/cubierto.gif") no-repeat 2px .25em;
margin:0;
padding:3px 3px 3px 20px;
margin-bottom:3px;
line-height:1.4em;
}


Guardamos los cambios.
A partir de ahora cada vez que pinchemos en el icono de la entrada para añadir una viñeta a nuestras listas, mientras redactamos la entrada, seguiremos viendo la viñeta que proporciona Blogger. Una vez publicada la entrada, será visible el icono elegido por nosotros.

Así quedarían nuestras listas si usamos el código anterior tal cual lo he puesto:

Dependiendo del tamaño del icono que queramos colocar, hemos de modificar el padding, es decir, la distancia del icono al texto. En esta parte del código:

padding:3px 3px 3px 20px;

Normalmente con aumentar o disminuir el último valor (20px) servirá.
Y no hemos de olvidar el cambiar la url en el código, por la url del icono escogido.
Una página con iconos muy apropiados para este fin es Stylegala