Personalizar la Lista Numerada en Blogger

En el post anterior estuvimos trasteando en el CSS de nuestra plantilla para cambiar las viñetas en Blogger. En esta entrada vamos a personalizar la lista numerada en Blogger del mismo modo. Os voy a enseñar el estilo que tengo puesto en este blog.

1. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium.
2. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum .

Ahora vamos al lí. Vete a Plantilla > Edición HTML. Busca ]]></b:skin> y encima pega lo siguiente:

.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:1px solid #e2e3e2; /*Color de borde*/
background:#f2f2f2; /*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:#727272; /*Color de texto*/
text-align:left;
background:#e2e2e2; /*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*/

Ahora haz la prueba: