.post-body:first-letter { float:left; color: #333333; font-size:100px; font-family:none; line-height:80px; padding-top:1px; padding-right:5px; } font-style: italic; } span.letracapital{ float: left; font-size: 40px; line-height: 35px; /* Dobla el alto de linea menos 1 pixel */ font-family: Georgia, "Times New Roman", Times, serif; color: #2583ad; /* Azul */ padding-right: 5px; } -->

Recent Posts

Listas para las entradas de mi blog

23 jul 2021

Hoy vamos a explicaros como podemos crear unas listas para nuestras entradas facilmente.
El tener una lista en nuiestras entradas esta muy bien para poder parte de nuestro post y resaltar otras.
Podemos realizar esta lista directamente desde nuestra entrada con la barra de herramientas situada en la parte de arriba.

 Ejemplo de lista ordenada con numeros y puntos

  1. Mostar las etiquetas
  2. Cambiar las fotografias
  3. Informar en las Redes Sociales
Lo primero que tenemos que hacer es una copia de seguridad de nuestra plantilla antes de modificarla como vemos en este post.
Ahora nos vamos a:
Tema > Personalizar > Avanzado > Añadir CSS
Y ponemos este codigo:

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

 p{
font-family: 'Kalam', cursive;
      font-size: 13px;
      color: #000000;
    }

Cambiamos lo marcado en rojo por le tipografia que queramos, lo azul por el tamaño de la letra, lo marcado en morado por el color y el verde por el margen.

Una vez lo tengas todo le damos a guardar.
Cuando vallamos a nuestro post a insertar la lista nos saldra al dar HTML de esta forma.



  <li><span style="font-size: large;">Mostar las etiquetas</span></li>
<li><span style="font-size: large;">Cambiar las fotografias</span></li>
<li><span style="font-size: large;">Informar en las Redes Sociales</span></li>
</ol>

 Nosotros tenemos que añadir
 <p> después de <li> y </p> antes de </li>. Te lo muestro aquí.


  <li><p><span style="font-size: large;">Mostar las etiquetas</span></p></li>
<li><p><span style="font-size: large;">Cambiar las fotografias</span></p></li>
<li><p><span style="font-size: large;">Informar en las Redes Sociales</span></p></li>
</ol>

Y ya lo tenemos

No hay comentarios:

Publicar un comentario

Deja tu comentario y en breve te contestaremos