16 de mayo de 2016

Tutoriales: Personalizar las Listas Numeradas

En nuestra edición de entradas de Blogger,  creamos listas numeradas fácilmente. 
Si van al cogido HTML verán que las listas se muestras así.
<ul>
<li>Lista Numerada</li>
<li>Lista Numerada</li>
<li>Lista Numerada</li>
<li>Lista Numerada</li>
</ul>
Ya les explique como Personalizar las viñetas del blog lo cual es muy fácil, pero seguro se preguntaran ¿Se puede personalizar la lista numerada?
Si señores, lo pueden hacer, y al igual que las viñetas es muy sencillo.
Por defecto los elementos numerados se verán así:

Pero podemos personalizar los elementos de la lista, con CSS: El truco básicamente consiste en anular la numeración por defecto con: "list-style:none", y luego, usar propiedades de numeración automática. Este tutorial lo aprendí de Karla Castañeda gracias a su blog Compartidísimo.

Así que debes ir a
  • Pantilla → Personalizar → Avanzado → Añadir CSS
  • Una vez ahí pega el estilo de lista numérica de desees. 

Ejemplos y/o Estilos

  • Estilo 1

CSS:
.post-outer ol{
counter-reset:li;
margin-left:0;
padding-left:0
}
.post ol li{ /*Estilos de cada elemento*/
position:relative;
margin:0 0 20px 2em !important;
padding:4px 8px !important;
list-style:none;
*list-style: decimal;
border:2px solid #01A9DB; /*Color de borde*/
background: #FAFAFA; /*Color de fondo*/
text-indent:10px;
}
.post ol li:before{ /*Los estilos del Número*/
content:counter(li);
counter-increment:li;
position:absolute;
top:-5px;
left:-5px;
font-family:'Oswald', serif;
font-size:14px;
width:12px;
margin:0 0 10px 0;
padding:4px !important;
color:#000; /*Color de texto*/
text-align:left;
background:#BDBDBD; /*Color de fondo*/
text-indent:2px
}
.post ol li:after{
content:"";
position:absolute;
top:-5px;
left:14px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 5px 0 0 5px;
border-color: transparent transparent transparent #aeaeae; /*color del triangulito*/
}
  • Estilo 2

CSS:
.post-outer ol{
counter-reset:li;
margin-left:0;
padding-left:0
}
.post ol li{
position:relative;
margin:0 0 20px 2em !important;
padding:4px 8px !important;
list-style:none;
*list-style: decimal;
}
.post ol li:before{
content:counter(li);
counter-increment:li;
position:absolute;
top:-8px;
left:-39px;
font-family:'Oswald', Arial;
font-size:30px; /*tamaño de la fuente*/
width:35px;
margin:0 0 10px 0;
padding:4px !important;
color:#000;
text-align:center;
}
  • Estilo 3

CSS:
.post ol{
counter-reset:li;
margin-left:0;
padding-left:0
}
.post ol li{
position:relative;
margin:0 0 13px 2em !important;
padding:4px 8px !important;
list-style:none;
*list-style:decimal;
}
.post ol li:before{
content:counter(li);
counter-increment:li;
position:absolute;
top:0;
left:-2em;
width:27px;
margin-right:8px;
padding:3px 1px 4px 0 !important;
color:#000; /*color de la fuente*/
font-size:16px;
background:url(http://1.bp.blogspot.com/-CfOAJerssTA/UN0Rd4BrDgI/AAAAAAAALXo/9YXtkNLntp4/s1600/circulo2.png) no-repeat left top;
font-weight:bold;
text-align:center
}

Freebies

Aquí les dejo diferentes círculos de colores que ha creado. Para utilizarlos si eligen el 3er estilo. Simplemente copien el URL de la imagen y cámbienla por el URL que esta en negrita.

       
      

Algo fácil, útil y atractivo. Espero les guste y lo utilicen en su blog.

2 comentarios:

  1. Muchísimas gracias por este tutorial. He aplicado tus indicaciones, pero sucede que con el primer estilo (es el que más me convence), si por lo que sea fuerzo la lista para que tras ser interrumpida, se reinice a partir del número correlativo al anterior, en vez de por el 1, nuevamente, en el nuevo estilo no lo reconoce. Además, me pone en cada viñeta el número por duplicado: fuera de las "tablas" y dentro de la propia tabla. ¿A qué se puede deber? Supongo que sea porque tenga código duplicado, pero no lo encuentro en mi plantilla, aunque ése es el menor inconveniente, lo que si me preocupa es cómo hacer para que continué la lista en el número adecuado y no que la comience otra vez.
    Un saludo.

    ResponderEliminar
  2. He observado que si elimino la línea del código: "counter-incremente:li" me aplica en el estilo 1, un "O" para todas las viñetas, aunque fuera de la tabla sí me prevalece el número original y correcto.
    Un saludo.

    ResponderEliminar