Lista con Viñeta Perzonalizada para el Blog

Si quieres crear un post con una lista con viñeta personalizada, este artículo te vendrá bien, ya que hoy veremos cómo podemos hacerlo de una manera fácil y rápida.

Primero creamos una entrada, le asignamos un título, en el Editor de entradas pincha en la pestaña Edición de HTML y pega el siguiente código:

<ul id="mylista">
<li><a href='#'>Juegos</a></li>
<li><a href='#'>Softwar</a></li>
<li><a href='#'>Recursos</a></li>
<li><a href='#'>Herramientas</a></li>
</ul>

Luego ve a Diseño > Edición de HTML > con la ayuda de (Ctrl+F) busca la etiqueta ]]></b:skin> y justo antes pega el siguiente código CSS:

#mylista{
list-style-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhspzEDOZw7APYGvumfx5HflaoN_B5lT2LUNGIwygxOvt_Kjs74iHooCYhTrNl6o9B9CTYvLJiwiScraVcxnzgvpRvN8VbvuCSgdtVHr4xMGlMyFTUmW02VWdFCSpqtRuVktUQ5LD0tYoI/");
list-style-type:none;
}

Cambia lo que está en color verde por la URL de tu imagen, Guarda los cambios y listo.

Para los que no quieren utilizar una imagen como viñeta, pueden utilizar uno de los dos siguientes códigos CSS:

Muestra como viñeta un circulo vació


#mylista{
list-style-tipe:circle;
}

Muestra como viñeta un cuadrodo relleno

#mylista{
list-style-tipe:square;
}

Una vez has elegido uno de los dos códigos, lo copiamos y lo pegamos justo antes de la etiqueta  ]]></b:skin> Guardamos los cambios y listo.