Paso 14: Usar listas reales

El código HTML utiliza la etiqueta <ul> para las listas aleatorias y la etiqueta <ol> para las listas ordenadas.
Para lograr una apariencia más atractiva, se cambiará por una imagen bonita. En este caso, he elegido una que podemos encontrar en word:

 

Lo primero que he hecho ha sido subir dicha imagen a este post, para obtener de esta forma la url que usaré para definir mi lista. Una vez subida, he copida la url y he colocado lo siguiente en mi plantilla  de blogger:

#mylista{

list-style-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8WWtTrEhK8CduqXws4rg2LE_EwDfrhWJOFALhWoM44SaGyYsGRjeYL1XhFW-8EZbCex4jJFe828ln-qYGZ3K7hWNyQ1LX0qfmrJ2PlhdObheLSle7_LNIG8GNRGbIr_2cOFkGY7kNe9I/s1600/icono.jpg");

list-style-type:none;

Tras hacer esto, he vuelto a esta entrada para realizar una lista a modo de ejemplo, para comprobar que efectivamente aparece la imagen que yo habia seleccionado en lugar de las típicas bolas. 

EJEMPLO: Este blog consta de varios apartados:

• Página principal.
• Datos personales.
• Archivos del blog. 

Para conseguir esta lista, he modificado lo siguiente dentro de la edición HTML de esta entrada

<ul id="mylista">

<li>Página principal.</li>

<li>Datos personales.</li>

<li>Archivos del blog.&nbsp;</li>

</ul> 

Problemas surgidos

He tenido muchos problemas para realizar este paso pues no encontraba la forma de que apareciese la imagen que elegía. Tras intentar hacerlo cogiendo la url de la imagen de una web que no resultó, finalmente un compañero explicó como hacerlo de esta forma y siguiendo sus pasos conseguí hacerlo.