5 trucos Blogger para las listas con viñetas

Antes de entrar al detalle de estos 5 trucos para modificar el aspecto de las listas con viñetas de Blogger, hay que aclarar para los principiantes que nos referimos a los listados con puntos que puedes crear dentro de un post, que de normal van precedidos de puntos negros y los párrafos todos pegados. Con estos 5 trucos vamos a aprender a separar más el texto de la lista, a que los párrafos estén en una fuente itálica, a quitar los puntos negros y a cambiarlos por cuadrados o por círculos transparentes. En realidad todos estos "trucos" son la aplicación de diferentes propiedades del código CSS, un lenguaje informático con el cual podemos modificar el aspecto de nuestros contenidos.

Truco 1. Quitar las viñetas de todas las listas de todos los posts blog.
Tanto este truco como los siguientes que vamos a ver hacer se basan en la modificación de la plantilla, así que antes de nada vamos al editor de Blogger y abrimos nuestra plantillas (guarda una copia por si acaso). Una vez que guardes comprueba que todo ha quedado bien.

• Ve a la parte de la plantilla que tiene el código CSS <b:skin>, expande esa zona.
• Bajamas, pasando las zona de Variables Definitions, y entra a la parte donde está el código CSS normal.
• Dentro del código CSS busca el apartado /* Widgets ------------------------------- */
• Dentro del apartado de los "widgets" bus el siguiente código y guarda la plantilla.

ul li {list-style-type:none;}

Truco 2: Poner en cursiva todas las listas dentro de los posts.
Este es una continuación del anterior truco, lo único que cambia es el código que vamos a pegar que será. todas las listas  Quitar las viñetas de algunas listas del blog.

ul li {font-style:italic;}

Truco 3: Cambiar el tipo de viñeta de la listas.
Aquí podemos elegir por añadir un círculo, un disco o un cuadrado, que son las tres posibilidades que hay para las listas ordenadas, aparte del punto. Tened en cuenta que esto se cambiará en principio en todas las listas del blog, las nuevas y las que ya hayas escrito en el pasado.

ul li {list-style-type:circle;}

ul li {list-style-type:disc;}

ul li {list-style-type:square;}

Truco 4. Separar el texto de las listas de viñetas.
Si queremos que queden el texto más separado que en el resto del documento podemos usar otra propiedad de CSS, en la que colocaremos el valor de separación deseado. 1.0 es una separación estrecha, un 1.5 da más amplitud y un 2.0 es una separación doble, pudiendo adaptar el valor tanto como quieras. Debes tener en cuenta que no está separándote los elementos, sino todas las líneas del texto.

ul li {line-height:1.8;}

Antes de pasar al cuarto y último truco vamos a intentar colocar todo lo que hemos aprendido junto, para que veas que las instrucciones que se colocan dentro de los mismos corchetes. Por ejemplo para la imagen que tienes al inicio del post el código usado es algo así.

ul li {list-style-type:square;

font-style:italic;

line-height:1.8;}

Truco 5. Vamos a explicar como usar todo lo que hemos hecho antes pero sólo en las listas que a nosotros nos interese y no en todas. Ahora tendremos que usar dos códigos uno CSS y uno HTML. El primero lo colocamos igual que antes dentro de la plantilla, en el código CSS, en la sección de los "posts". Sería el mismo código de antes pero cambiando ul por #lista (Sí, es como si fuera un hastag de Twitter, pero en este caso estamos usando una identidad de CSS).

#lista li {list-style-type:square;

font-style:italic;

line-height:1.8;}

¿Bien? El código HTML se aplica dentro del post. Es decir, con el cambio que hemos hecho antes no veras ningún cambio en el blog de Blogger, pero cuando escribas una lista, si le colocas el identificador entonces el aspecto de la lista cambiará.

• Desde un post creamos una lista con viñetas, con su contenido.
• Entras en el código HTML. normal y buscas la parte donde aparece <ul>.
• Le añadimos la identidad, es decir que cambiamos el código <ul> por el siguiente.

<ul id="lista">

Antes de terminar, quiero aclarar que estos trucos son para principiantes para poder hacer las modificaciones ya que no requieren borrar nada de la plantilla. Para un desarrollo más profesional y que quede el código más limpio habría que buscar en cada plantilla el sitio exacto en el que se está codificando el formato de las listas. Por ejemplo en la plantilla Watermark de Blogger, creada por Joshn Peterson, el formato CSS de estas listas está en indicado en el apartado de Widgets, a través de los siguientes selectores:

• .widget .post-body ul
• .widget .post-body ul li

Para que quede un código más limpio los cambios es mejor realizarlos en esta parte de la plantilla eliminando las características que no queramos para las listas del blog. Espero que las indicaciones os resulten útiles, aunque modificando el código CSS se pueden realizar un montón de cambios en las listas, como por ejemplo añadirles un fondo de pantalla con una imagen, un marco, darles márgenes, hacer que el texto tenga color, cambie de tamaño al pasar o sea más grande.