Personalizar las viñetas del blog

Las propiedades CSS de las listas de viñetas son pocas pero podemos apoyarnos con imágenes para hacerlas más vistosas.
Una lista de viñetas puede formarse manualmente de este modo:

<ul>
<li>Artículo 1</li>
<li>Artículo 2</li>
<li>Artículo 3</li>
</ul>

O si lo prefieres puedes usar el botón del editor de entradas
La lista de viñetas clásica se ve de este modo:

• Artículo 1
• Artículo 2
• Artículo 3

Pero eso no significa que tenga que verse siempre así. Podemos usar otras propiedes para darle otro aspecto.
Por defecto las viñetas usan la propiedad disc y se ven como en el ejemplo anterior. Otras dos propiedades que podemos usar son:

Circle	Square
Artículo 1 Artículo 2 Artículo 3	Artículo 1 Artículo 2 Artículo 3

Para cambiar la forma tradicional de tus viñetas por cualquiera de estas dos entra en Diseño > Edición de HTML y agrega esto antes de ]]></b:skin>:

.post ul {
list-style: none;
margin: 10px 0 0 20px;
padding: 0;
}

.post ul li {
margin: 0;
padding: 0 0 0 10px;
}

Ahora donde dice none cámbialo por circle o square, el que más te guste.
O si lo prefieres puedes usar una imagen para hacerlo más vistoso.

Artículo 1 Artículo 2 Artículo 3

En ese caso usarías este código:

.post ul {
list-style: none;
margin: 10px 0 0 20px;
padding: 0;
}

.post ul li {
background:url(URL de la imagen) center left no-repeat;
margin:0;
padding:3px 3px 3px 20px;
}

Cambia lo que está en rojo por la dirección de tu ícono. Puedes ajustar las medidas de margin y padding hasta que quede bien ya que dependiendo de cada plantilla podrá verse más separado o más apretado.

Estas mismas propiedades puedes aplicarlas para las viñetas de la sidebar sólo cambia

.post ul {
.post ul li {

Por:

.sidebar ul {
.sidebar ul li {

Generalmente la barra lateral tiene otras medidas de espacio así que nuevamente tendrás que ajustar el margin y padding hasta que quede bien.