miércoles, 11 de noviembre de 2015

Tipo #1 de lista numerada.

Minghao bebito. No puede ser que ya sean 18 años.
¡Hola! hoy les traigo este post con un pequeño tutorial para personalizar la lista numerada del blog.
Esta es el estilo que les traigo.

Bueno, para ponerlo vayan a Plantilla >> Editar HTML
Dan click en CTRL+F y buscáis ]]></b:skin>arriba de él peguen el siguiente código:
.post-outer ol{
counter-reset:li;
margin-left:0;
padding-left:0
}
.post ol li{ /*Estilos de cada elemento*/
position:relative;
color:#D8D7D7;
text-shadow: 1px 1px 1px #fff;
background: #F1F1F1;
border: double 4px #E8E8E8;
box-shadow: inset 1px 1px 0px #F8F8F8;
font-family: 'Pf Arma Five'; font-size: 11px;
font-weight: normal;
text-align: center;
padding: 3px;
border-radius:2px;
margin:0 0 20px 2em !important;
padding:4px 8px !important;
list-style:none;
*list-style: decimal;
border:1px solid #e2e3e2; /*Color del Borde*/
background:#f2f2f2; /*Color del Bondo*/
text-shadow:2 2 2px #fff;
text-indent:10px;
}
.post ol li:before{ /*Los estilos del lado 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 del texto*/
text-align:left;
background:#C4E4ED; /*Color del 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 #A6D4E1; /*Color del Triangulito*/
}

Agradezco por la firma a Karyn.

6 comentarios: