Marca la diferencia personalizando las listas ordenadas de tu blog

3.2.15

Debo confesar que las listas son una de mis mayores perdiciones!

Hago listas para todo y desde que tengo uso de razón.

Listas y listas con números, siempre con orden de prioridad de lo que quiero hacer o debo terminar, opciones de compras, ideas para posts, palabras clave para el blog…

Y como no podía ser menos, en el blog también acostumbro a hacer listas ordenadas.

Pero la verdad es que son un poco sosas.

¿Las personalizamos?





Esto ayudará a resaltar más tus listados y a armonizar el blog, con el tipo de letra que ya utilizas o los mismos colores.

Lo que vas a personalizar son las listas ordenadas <ol>, las que tienen el número delante.


El número y el texto de <ol> con las mismas características


Para empezar, tendrás que escoger una fuente (tipo de letra) que quieras utilizar.

Después de leerte este post de cómo utilizar las fuentes de Google Fonts en tu blog, tendrás que pegar el código en tu HTML. (mantén la calma que está todo muy bien explicado).


Ahora ya podemos proceder al CSS
  1. Accede a tu código CSS (Plantilla --> Personalizar --> Avanzado -->Añadir CSS).
  2. Pega el siguiente código para personalizar la fuente.


       ol {
         font-family: 'Lobster', cursive;
         font-size: 30px;
         color: #ff0055;
         margin-left:30px;
       }

  3. Adáptalo a tu blog.

         font-family --> Debes pegar el código CSS que has encontrado en Google Fonts.
         font-size --> Puedes aumentar el tamaño de tu fuente para que resalte más.
         color --> El color que quieres utilizar en código HEX.
         margin-left --> El el margen a la izquiera del número, para moverlo hacia la derecha.
  4. Ahora TODAS las veces que utilices una lista ordenada, te aparecerá personalizada. Ya puedes ver el resultado en tu blog.

El número y el texto con distintas características

  1. Accede a tu código CSS (Plantilla --> Personalizar --> Avanzado -->Añadir CSS).
  2. Pega el siguiente código para personalizar la fuente.


       ol {
          font-family: 'Lobster', cursive;
          font-size: 30px;
          color: #ff0055;
          margin-left:30px;
       }

       ol p{
          font-family: Arial, Helvetica, sans-serif;
          font-size: 13px;
          color: #000000;
        }
  3. Adáptalo a tu blog.

    Ahora debes poner el código para personalizar el número (ol) y para el resto del texto que sigue (ol p)

         font-family --> Debes pegar el código CSS que has encontrado en Google Fonts.
         font-size --> Puedes aumentar el tamaño de tu fuente para que resalte más.
         color --> El color que quieres utilizar en código HEX.
         margin-left --> El el margen a la izquiera del número, para moverlo hacia la derecha.

    Si quieres para el resto del texto, puedes utilizar la misma fuente que para el texto normal.
  4. Importante!! Cuando lo quieras utilizar en la redacción de un post, tienes que modificar un poco su HTML.

    Tu escribes la lista como siempre y obtendrás esto (si lo miras en HTML).


       <ol>
         <li>Terminar el post de la semana que viene.</li>
         <li>Llamar a Pablo.</li>
         <li>Enviar la Newsletter.</li>
         <li>Hacer la compra para la excursión de mañana.</li>
       </ol>


    Entonces lo que tienes que hacer es añadir <p> después de <li> y </p> antes de </li>. Te lo muestro aquí.


       <ol>
         <li><p>Terminar el post de la semana que viene.</p></li>
         <li><p>Llamar a Pablo.</p></li>
         <li><p>Enviar la Newsletter.</p></li>
         <li><p>Hacer la compra para la excursión de mañana.</p></li>
       </ol>


    NOTA: Es imprescindible que añadir este código sea la última cosa que hagas antes de publicar el post. Blogger tiene una falta y borra (cuando se le antoja!) las etiquetas <p>. O sea que tenlo muy en cuenta.

  5. El resultado sería este.


Pues ya lo tienes! Sólo debes decidir cuál de las dos maneras es la más apropiada para personalizar las listas ordenadas en tu blog.

Espero que te haya gustado.


Laura

¿Te ha gustado 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.