Personalizar las listas numeradas

16 de febrero de 2017
Personalizar las listas numeradas blogger

Buenos días mis queridos soñadores ♥ Aquí estoy de vuelta con los nuevos tutoriales que les había prometido en la entrada anterior. Hoy les traigo algo super básico y sencillo.. un tutorial mostrando como personalizar las listas numeradas en tu blog además de tres bonitos estilos algo minimalistas que pueden editar a gusto:
Personalizar las listas numeradas blogger tres estilos
Para formar las listas en el editor de entradas deben usar el icono    o bien en la edición HTML pegar esto:
<ol>
<li> Contenido 1 </li>
<li> Contenido 2 </li>
<li> Contenido 3 </li>
<li> Contenido 4 </li>
</ol>
Para personalizarlas deben pegar alguno de los estilos que les daré arriba de la etiqueta ]]></b:skin> en la edición HTML de su plantilla.

Estilo 1 ♥ 
.post ol{
counter-reset:li;
margin-left:30px;  /* Separa las listas del borde del blog */
padding-left:0
}
.post ol li{
position:relative;
margin:0 0 20px 30px !important;
padding:5px;
list-style:none;
*list-style: decimal;
background:#fafafa; /* Color de fondo de las listas */
}
.post ol li:before{
content:counter(li);
counter-increment:li;
position:absolute;
top:0px;
left:-40px;
width: 15px;
font-size:14px;
text-align: center;
margin:0 0 10px 0;
font-weight: bold;
padding:5px !important;
color:#fff; /* Color de texto de la numeracion */
background:#fcc; /* Color del fondo de la numeracion */
border-radius: 100%; /* Borde curvo */
border: solid 2px #ffb0b9; /* Color del borde */
}

Estilo 2 ♥ 
.post ol{
counter-reset:li;
margin-left:40px; /* Separa las listas del borde del blog */
}
.post ol li{
position:relative;
margin:0 0 20px 0px !important;
padding:5px;
list-style:none;
*list-style: decimal;
background:#fafafa;  /* Color de fondo de las listas */
text-indent:10px;
}
.post ol li:before{
content:counter(li);
counter-increment:li;
position:absolute;
top:0px;
left:-50px;
width: 15px;
font-size:14px;
text-align: center;
margin:0 0 10px 0;
font-weight: bold;
padding:5px !important;
text-indent:2px;
color:#fff;  /* Color de texto de la numeracion */
background:#fcc; /* Color del fondo de la numeracion */
}
.post ol li:after{
position: absolute;
top:3px;
left:-25px;
border-color: #fff #fff #fff #fcc;  /* Color de la flechita */
border-style: solid;
border-width: 9px;  /* Tamaño de la flechita */
content: "";
}
Estilo 3 ♥ 
.post ol{
counter-reset:li;
margin-left:30px; /* Separa las listas del borde del blog */}
.post ol li{
position:relative;
margin:0 0 20px 0px !important;
padding:5px;
list-style:none;
*list-style: decimal;
background:#fafafa; /* Color de fondo de las listas */text-indent:40px;
}
.post ol li:before{
content:counter(li);
counter-increment:li;
position:absolute;
top:0px;
left:-20px;
width: 18px;
font-size:18px;
text-align: center;
margin:0 0 10px 0;
font-weight: bold;
padding:5px !important;
color:#fff;  /* Color de texto de la numeracion */text-indent:2px;
background:#fcc;  /* Color del fondo de la numeracion */}
.post ol li:after{
position: absolute;
top:-0px;
left:8px;
border-color: #fafafa #fafafa #fafafa #fafafa; /* Mismo color que el fondo de las listas */border-style: solid;
border-width: 15px;  /* Tamaño de la flechita */content: "";
}
.post ol li:hover:after{
position: absolute;
top:-0px;
left:8px;
border-color: #fafafa #fafafa #fafafa #fcc; /* Color de la flechita hover */border-style: solid;
border-width: 15px;  /* Tamaño de la flechita hover */content: "";
}
Espero les haya sido de ayuda! ¿Qué les pareció el tutorial?
Cualquier duda pueden escribirme a sol.pourcel@gmail.com

4 comentarios:

  1. Hola!
    Wauu que hermoso la personalizacion de las listas!! Se ve super lindo, tal vez me anime, soy un poco floja para editar pero tal vez me anime!
    Besos

    ResponderEliminar
    Respuestas
    1. Quedarán geniales en tu blog si utilizas seguido las listas en tus entradas ♥

      Eliminar
  2. ¡Hola! Me gusto mucho el tutorial, me encanta el diseño de tu blog, amo todo el rosa <3 a mi me gustaría saber como hacer un carrusel de fotos que muestre entradas recientes y asi :3 saludos!

    ResponderEliminar
    Respuestas
    1. Gracias linda ♥ Subiré un tutorial al respecto en mi próxima entrada de tutorial .. besos!

      Eliminar
Muchas gracias por dedicarle tu tiempo a mi blog! Espero que la entrada te haya gustado y no dudes en dejar tu opinión en un comentario ♥ (Por favor no dejes spam)