jueves, 17 de abril de 2014

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!! 
Firma Monica
:) :( ;) :P :D :/ :x :* :O :S :| B) :w :a :)) :(( O:) 7:) 7:P X( (:| =)) I-) 2:P =DD X_X :!! :q ^_^ :ar!



9 comentarios

  1. Muchas gracias, lo de personalizar las listas lo vi hace tiempo pero nunca se me ocurrió hacerlas distintas, muy muy útil, son de estas cosas que si no te las cuentan no tienes ni idea! supongo que pueda hacerse ago parecido con la numeración de viñetas
    Beso! y felices vacaciones

    ResponderEliminar
  2. Gracias y felices pascuas.
    Html aun no es mi amigo, pero estamos en conversaciones hehehe.
    Como se nota que estamos de vacaciones, soy la comentarista dos el dia de hoy en otro momento seria la 44 mas o menos ahahha.
    Abrazos y que descanses ;)

    ResponderEliminar
  3. Muchas gracias por las ideas, te acabo de descubrir y voy a suscribirme ya !!
    Yo empiezo a conocer a Html y vamos a ver si nos caemos bien, así que tendré que empaparme de tus ideas desde el inicio.
    He lanzado hace poco una Tienda online (Mitiendadecaprichos.com) y su Blog correspondiente, y estoy decidida a aprender a diseñar con mis propias ideas y no las que me impone mi informático, jajaja..
    Gracias de nuevo y felices vacaciones !!!

    ResponderEliminar
  4. Muy pero que muy interesante, ya sabes que siempre estoy friendote a preguntas sobre blogguer a si que este post me viene feteng, jajaja muchas gracias

    ResponderEliminar
  5. ¡Qué buena idea! Gracias por compartirla, a ver si me animo y lo hago en el mío.

    ResponderEliminar
  6. Joooooo!!! No me saleeeeee!!!!! Esto no mola....

    Para empezar es que no me sale < u l > (lo pongo separado porque sino no me deja publicar el comentario) y no sé si en todos los sitios donde ponga < l i > tengo que poner el código que has puesto en el tutorial
    Y además, en vez de usar dropbox (que lo tengo, pero como que no lo uso mucho...) he usado tinypic para subir la imagen de la viñeta y no sé si será eso por lo que no me funciona...
    ¿sabes si lo estoy haciendo mal?

    Me fastidia porque es algo que quería hacer desde hace un tiempo y pensaba que me iba a ser más fácil!

    Gracias por el tutorial!!

    ResponderEliminar
    Respuestas
    1. ¡Hola!

      Es muy fácil, solo tienes que cambiar el código de lista que quieres personalizar. Haz las pruebas con una entrada en blanco y poniendo solo una lista. Cuando veas como funciona, lo haces con la entrada completa.

      Para ver si el problema es del servidor de las imágenes, para probar usa la dirección de alguna imagen de internet que veas que tiene un tamaño adecuado. Si funciona, entonces el problema es del tinypic.

      ¡Suerte!

      Eliminar
  7. Un truco genial, no venía buscando eso exactamente, pero me vendrá bien saberlo para aplicarlo alguna vez. Un abrazo.

    ResponderEliminar

¡Qué tengas un día genial, señor/a comentarista!