La manera más fácil de poner una imagen delante de las listas en tu blog

9.12.15

Hay bloggers que les encanta personalizar su blog para que sea diferente a todos los otros y deje huella en sus lectores.

¿También te pasa?

No sé si lo sabes, pero las listas encantan y enganchan a los lectores a continuar leyendo. Además, no aburren.

Un día te mostré cómo podías personalizar las listas con colores y tipografías, pero hoy es el turno de las imágenes.



Simplemente tienes que añadir un código CSS a tu blog y cada vez que pongas una lista no ordenada, en vez de aparecer los puntitos negros, aparecerá automáticamente la imagen que hayas escogido.


Aquí debajo puedes ver un ejemplo, para que te quede claro lo que podrás hacer.





Añade el código CSS para las listas no ordenadas


  1. Entra en Plantilla del menú lateral izquierdo de Blogger.


  2. Pincha en Personalizar.


  3. Escoge Avanzado y luego Añadir CSS.



  4. Pega el siguiente código en el recuadro blanco de la derecha.


      .post-body ul{

         list-style-image: url('LA_URL_DE_TU_IMAGEN');     
         padding-left: 20% !important;

         line-height: 2 !important;
      }


    Ahora debes adaptar el código a las necesidades de tu blog.

    list-style-image --> es la imagen que quieres poner delante de la lista. Tienes que sustituir LA_URL_DE_TU_IMAGEN por la URL de la imagen que quieras poner.

    Ten en cuenta que la imagen que pongas debe tener las medidas que vas a utilizar. No puedes modificar las medidas de la imagen desde aquí.

    padding-left --> como la imagen que utilizarás seguramente va a ser más grande que el puntito negro que antes había, tienes que dejar un poco más de espacio entre el lateral izquierdo del blog y tu lista. Esto lo conseguirás aumentando el porcentaje. En el ejemplo hay 20%, pero tu lo debes adaptar a tu imagen.

    line-height --> si la imagen es más grande que el puntito negro, quedará mejor si dejas un poco más de espacio entre las líneas de la lista. Simplemente aumenta el número, que representa el factor múltiple al tamaño de la fuente de tu post.

  5. No olvides de guardar los cambios antes de volver al blog.

    Lo debes hacer desde el botón del menú de arriba a la derecha.



Esta es una manera muy fácil de dar un toque más personal a tu blog.

A lo mejor tienes un pequeño símbolo, una parte de tu logo o algo que define tu blog. Es una buena opción para poner como imagen delante de las listas ordenadas de tus posts.

Que tengas una buena semana.

Laura


¿Te ha servido lo que has leído? Muchas gracias por compartirlo en tus redes sociales! Tus contactos y yo te lo agradeceremos! :-)

¿Quieres contenido exclusivo para mejorar tu blog?
Suscríbete y recibirás AHORA la guía para dominar Blogger HOY!
Tu blog no pasará inadvertido.
Dejará huella.