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 件のコメント:

  1. Holaa, está preciosa!:3
    besosss~~~

    返信削除
    返信
    1. Hola, me alegro de que te guste.
      Saludos!

      削除
  2. Buen tutorial Cloud ;;
    Saludoss!

    返信削除
  3. Esta muy linda la lista, se agradece el aporte Cloud ^^
    Saludos!
    -Amary

    返信削除
    返信
    1. Hola! muchas gracias por tu comentario, me alegro que te guste
      ¡Saludos!

      削除