Pasos a Realizar

Paso 14: Usar listas reales


Las listas, en el código HTML, tienen las siguientes etiquetas para marcarlas:
  • Etiqueta <ul> para las listas aleatorias
Ejemplo uso etiqueta ul
Editor HTML Redactar
<ul>
        <li>Texto 1</li>
        <li>Texto 2</li>
        <li>Texto 3 </li>
</ul>
  • Texto 1
  • Texto 2
  • Texto 3

  • Etiqueta <ol> para las ordenadas.
Ejemplo uso etiqueta ol
Editor HTML Redactar
<ol>
        <li>Texto 1</li>
        <li>Texto 2</li>
        <li>Texto 3 </li>
</ol>
  1. Texto 1
  2. Texto 2
  3. Texto 3


Si deseamos crear una lista más divertida donde usamos una imágen como indicador de la lista, podremos escribir nuestra lista usando marcadores de lista apropiados:

¿Cómo hacerlo?


En Blogger al estar situados en el editor del artículo, seleccionamamos las filas que deseamos crear como listas y pulsando el botón “Listas numeradas” o "Listas con viñetas".

Pero si se quiere colocar una imágen los pasos serían los siguiente4s.En Blogger editamos la plantilla principal, seleccionando la solapa "Plantilla" del editor y pulsando el botón “Editor HTML”. Despues de las definiciones de las constantes, justo antes de la etiqueta ]]></b:skin> sdefine la nueva constane  menuLista.  Deberá quedar como las siguientes líneas de código:



/* Imagne de la lista
----------------------------------------------- */
#menuLista{
  list-style-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0ogYVnnos0MHFOYjmyfoWdS5jKuAuwUn98LYQ-q4EC98u18X2cLcSuuIKfWSvBae0dAH_a-8prFQ36SOdakx2Ftqju6en3QfOPHq0s-khXvPeObPqmTpN_eHJ2riZ1n6LWvAjdrveXUw/s1600/icono_lista_II.png");
list-style-type:none;
}


La url es la dirección de la imágen que vamos a poner como viñeta en la lista.
En nuestro artículo insertamos la nueva variable definida en el editor de HTML.


 <ul id="menuLista">
<li>Texto 1</li>
<li>Texto 2</li>
<li>Texto 3</li>
</ul>



Nota:
Antes de salvar los cambios con “Guardar Plantilla”, será conveniente comprobar que no existe ningún error para ello pulsar “Vista Previa”.