¿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!!