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.

No hay comentarios:

Publicar un comentario