Numerar una Lista en entradas de blogger utilizando jQuery

En este artículo vamos a utilizar jQuery para numerar una lista que quieras mostrar en las entradas de blogger.

Blogger trae la forma de enumerar o centralizar una lista predeterminada, pero puedes solamente elegir entre 2 opciones.

La primera opción de Blogger
La opción 1, te ofrece mostrar la lista utilizando números.

1. Titulo 1
2. Titulo 2
3. Titulo 3

La segunda opción de Blogger
La opción 2, te ofrece mostrar la lista utilizando un punto.

• Titulo 1
• Titulo 2
• Titulo 3

Entonces, nuestro objetivo es numerar una lista utilizando ambas funciones, la cual para eso vamos a utilizar una función de jQuery que lo hará posible.

Adaptación
Solamente vamos a necesitar colocar el siguiente código antes de la etiqueta </head> de nuestro blog: <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js' type='text/javascript'/></script> <script type='text/javascript'> $(document).ready(function() { $('el > li').each(function () { $(this).prepend("(" + ($(this).index() + 1) + ") "); }); }); </script> Con eso solamente nos faltaría añadir en una entrada normal algo como esto: <el> <li>Titulo 1</li> <li>Titulo 2</li> <li>Titulo 3</li> </el> Ejemplo

Adaptación manual en entradas
Para la adaptación manual sin añadir el script en el </head> bastará con añadir el script jQuery en la entrada, siempre tomando en cuenta que la entrada debe estar en la opción HTML y listo, crear una lista con el código ya proporcionado.

Utilización individual
Este script puede utilizarse de manera individual, sin necesidad de solamente utilizarlo en blogger, también puedes numerar las lista de tu página cambiando los atributos del script y utilizando los predeterminados de HTML para generar una lista de la siguiente forma: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { $('ul > li').each(function () { $(this).prepend("(" + ($(this).index() + 1) + ") "); }); }); </script> Lo que hicimos fue cambiar el atributo el por ul que es el predeterminado en HTML y ya, eso numerara tanto con números también con puntos, toda lista en la página HTML.