Personalizando Lista Numerada no Blogger!

Nossa quanto tempo, não é galera! Depois de dois templates encomendados fiquei um pouco sem tempo para postar algo novo aqui no Design Mania. Bom, mais hoje eu trouxe um tutorial bem interessante, para quem costuma usar a Lista Numerada do Blogger. Para quem não conhece se trata desta abaixo:

Trouxe hoje para vocês dois estilos, para a personalização da lista [Feitos pelo site ProDeveloper]. Para instalar um dos estilos, você devera abrir sua Caixa de Código, e procurar (Ctrl+F) por  ]]></b:skin>, e colar logo acima dele os códigos abaixo.

PRIMEIRO ESTILO

[code].post ol{ counter-reset:li; list-style: none; *list-style: decimal; margin-left:0; padding-left:0 } .post ol li{ position:relative; margin:0 0 20px 15px !important; padding:4px 5px 4px 10px !important; list-style:none; *list-style: decimal; border-bottom:1px solid #e2e3e2; /* estilo da borda inferior dos elementos*/ background:#f2f2f2; /* cor de fundo dos elementos*/ text-indent:14px; } .post ol li:before{ content:counter(li); counter-increment:li; position:absolute; top:-6px; left:-10px; font-family:'Oswald', serif; font-size:14px; /* tamanho dos números*/ width:20px; margin:0 0 10px 0; padding:4px !important; color:#A5A5A5; /* cor dos números*/ text-align:left; background:#e2e2e2; /* cor de fundo dos números*/ text-indent:6px; text-shadow: 1px 3px 2px #fff; } .post ol li:after{ content:""; position:absolute; top:-5px; left:17px; width: 0px; height: 0px; border-style: solid; border-width: 5px 0 0 5px; border-color: transparent transparent transparent #aeaeae; /* color of the triangle behind */ }[/code]

SEGUNDO ESTILO

[code].post ol{ counter-reset: li; list-style: none; *list-style: decimal; padding: 0; margin-bottom: 4em; font: 13px 'trebuchet MS', 'lucida sans'; /* tamanho e estilo da fonte*/ text-shadow: 0 1px 0 rgba(255,255,255,.5); } .post ol li{ position: relative; display: block; padding: .4em .4em .4em .8em; *padding: .4em; margin: .5em 0 .5em 4.5em; text-decoration: none; } .post ol li:before{ content: counter(li); counter-increment: li; position: absolute; left: -30px; top: 50%; margin-top: -1em; background: #bada55; /* cor de fundo dos números*/ height: 2em; width: 2em; line-height: 2em; text-align: center; font-weight: bold; } .post ol li:after{ position: absolute; content: ''; left: -5px; margin-top: -.7em; top: 50%; width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left:8px solid #bada55; /* cor de fundo da seta*/ }[/code]

Agora e só personalizar, e  já pode usar!