Cómo personalizar tus listas del blog con imágenes distintas

    ¿Hola? ¿hay alguien ahí? Ah, sí, ya os veo a todos (al menos a todos los que no estáis de vacaciones ya) ¡bienvenidos!:). A mí me toca mañana mini-escapadita a Innsbruck y a Salzburgo. Qué ganas tengo... ¡ya os contaré!

    ¿Vosotros qué tal lleváis la semana? La mía entretenida con algunos cambios en el blog. Y sobre eso va la entrada de hoy, porque os traigo un nuevo tutorial (de los que molan). Esta vez uno para personalizar las listas con viñetas de vuestros posts y queden así:

• Ejemplo con espiral en azulito
• Ejemplo con espiral negra
• Ejemplo con espiral verde
• Ejemplo con espiral roja
• Ejemplo con espiral grisácea

    Estoy segura de que os va a gustar porque es muy útil y fácil. Todo un 2x1. Hacía tiempo que no hacía ningún tutorial de html, pero es que la mayoría de cosas que os puedo enseñar ya están explicadas en alguno de los blogs que os recomendé en el top 10 sobre personalización de blogs (y es un poco absurdo ir repitiendo contenido que ya está perfectamente claro en otros blogs). Solo os cuento cosas sobre html nuevas cuando al querer hacer algún cambio en el blog, he tenido que buscar y buscar por internet la solución, y al final la he encontrado en algún foro técnico y no muy bien explicada. Las entradas que escribí en el blog de Blanca sobre los emoticonos en los comentarios o el efecto deslizante del botón subir arriba son un ejemplo.

    Imagino que ya sabréis cómo cambiar permanentemente el aspecto de los puntos (viñetas o bullets en inglés) por defecto de las listas del blog. Es muy sencillo, solo hace falta crear una nueva regla en el CSS de la plantilla y está explicado en muchos tutoriales por internet. Pero... ¿se puede hacer lo mismo sin que afecte a toooodas las listas que hagamos en el blog?

    Es decir, si quiero tener en cada lista o en cada viñeta una imagen o un símbolo diferente, ¿cómo lo hago? Si pongo un código en la plantilla html, afectará a todas las entradas y a todas las listas... uhmm. Eso fue lo que me pregunté y buscando, buscando encontré la solución. En la sección del blog de Vale más una imagen, podéis ver otro ejemplo. ¿A que queda chulo? :)

    La solución consiste en editar el html de la entrada que queráis, concretamente el html de la lista de viñetas. Os lo voy a explicar para Blogger pero el tutorial sirve para cualquier otro sistema.

Paso 1: Escribir la entrada del blog

    Escribís vuestra entrada usando las listas como siempre y os la guardáis por si metemos la pata.

Paso 2: Editar el html de la entrada

    Nos vamos a la vista html de la entrada y buscamos la lista que queremos personalizar. Para ello podemos hacer Ctrl+f y buscar el código <ul>. Haciendo esto, ya casi lo tenemos.

2.1 Toda la lista la con la misma viñeta

    Si queremos usar en todas las viñetas la misma imagen, simplemente sustituimos <ul> por este código:

<ul style="list-style-image: url(dirección_de_la_imagen);">

    Y nos quedará una lista como esta:

• Ejemplo 1 con flor azul
• Ejemplo 2 con la misma flor azul
• Ejemplo 3 con la misma flor azul

    Para la imagen de la viñeta podéis usar alguna de internet o subir la vuestra a un servidor como Dropbox, como ya os expliqué hace tiempo aquí.

    Si lo que queréis es usar uno de los símbolos predefinidos, entonces ponéis este código:

 <ul style="list-style-type: símbolo;">

    Como símbolos, podéis usar disc, square o circle. Así quedaría con circle:

• Ejemplo 1 con circulito
• Ejemplo 2 con circulito
• Ejemplo 3 con circulito

2.2 Lista con diferentes viñetas

    Si por el contrario queremos usar en cada viñeta una imagen diferente, entonces tenemos que buscar los <li> que hay entre <ul> y </ul>, y sustituir cada uno de los <li> por el siguiente código:
 
<li style="list-style-image: url(dirección_de_la_imagen);">

    En el texto en verde, pondremos cada una de las direcciones url de las imágenes que queremos usar. Así os tendrían que quedar:

• Ejemplo 1 con flor, del color azul de mi blog
• Ejemplo 1 con flor, del color verde de mi blog
• Ejemplo 3 con flor, del color rosa de mi blog

    Y de forma equivalente para los símbolos.

 <li style="list-style-type: símbolo;">

    Teniendo algo así.

• Ejemplo 1 con círculo relleno
• Ejemplo 2 con cuadrado
• Ejemplo 3 con círculo vacío

    Eso es todo, ¿veis qué fácil? Y el resultado queda súper mono. Pues ahora ya sabéis como personalizar vuestras listas con imágenes molonas. Espero que lo apliquéis en vuestros blogs, y que a partir de ahora cuando os visite, tengáis las listas llenas de iconos súper chulos y mucho más a juego con vuestro blog...

    Os dejo ya, que hoy es día de preparar la maleta para las mini-vacaciones. Qué bien me van a sentar :). ¡¡Os deseo unas muy felices pascuas a todos!!