#activar ~ .desplegable {display: none;overflow: hidden;} #activar:checked ~ .desplegable {display: block;} -->
Hacer una tarjeta de navidad
Ventanas modales para nuestras entradas
Imágenes con texto desplegable
Efecto de desvanecer las imagnes de nuestro blog al pasar el cursor.
Agrandar imagenes al pasar el cursor sobre ellas
 Plantilla Feminist Blogger Template
Plantillas Blog
Gadget etiquetas tipo menu
Un indice con JQuery para tu blog
La base de cotización
texto caligrafia
 Cinco estilos de Entradas populares

Listas para las entradas de mi blog


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

Publicar un comentario

0 Comentarios