Criar Uma Lista Personalizada Usando CSS

Nesta postagem compartilho com vocês este tutorial mostrando como se faz uma lista apenas usando CSS. 

Veja uma demonstração:

http://dicashot.blogspot.com.br/2014/05/os-melhores-sites-para-se-assistir.html

Para colocar a lista em seu blog

Entre em "Layout" - "Adicionar um Gadget" - "HTML/JavaScript" e cole o seguinte código

<style type="text/css">
/* Código by www.dicashot.blogspot.com */
ol{
 counter-reset: li;  
 list-style: none;  
 *list-style: decimal;  
 font: 15px 'trebuchet MS', 'lucida sans';
 padding: 0;
 margin-bottom: 4em;
 text-shadow: 0 1px 0 rgba(255,255,255,.5);
}


ol ol{
 margin: 0 0 0 2em;  
}

.rounded-list a{
 position: relative;
 display: block;
 padding: .4em .4em .4em 2em;
 *padding: .4em;
 margin: .5em 0;
 background: #ddd;
 color: #444;
 text-decoration: none;
 border-radius: .3em;
 transition: all .3s ease-out; 
}

.rounded-list a:hover{
 background: #eee;
}

.rounded-list a:hover:before{
    transform: rotate(360deg); 
}

.rounded-list a:before{
 content: counter(li);
 counter-increment: li;
 position: absolute; 
 left: -1.3em;
 top: 50%;
 margin-top: -1.3em;
 background: #87ceeb;
 height: 2em;
 width: 2em;
 line-height: 2em;
 border: .3em solid #fff;
 text-align: center;
 font-weight: bold;
 border-radius: 2em;
 transition: all .3s ease-out;
}
</style>
<ol class="rounded-list">
<li><a href="http://dicashot.blogspot.com.br/" target="_blank">Lista DicasHot</a></li>
<li><a href="http://dicashot.blogspot.com.br/" target="_blank">Lista DicasHot</a></li>
<li><a href="http://dicashot.blogspot.com.br/" target="_blank">Lista DicasHot</a></li>
<li><a href="http://dicashot.blogspot.com.br/" target="_blank">Lista DicasHot</a></li>
<li><a href="http://dicashot.blogspot.com.br/" target="_blank">Lista DicasHot</a></li>
<li><a href="http://dicashot.blogspot.com.br/" target="_blank">Lista DicasHot</a></li>
<li><a href="http://dicashot.blogspot.com.br/" target="_blank">Lista DicasHot</a></li>
<li><a href="http://dicashot.blogspot.com.br/" target="_blank">Lista DicasHot</a></li>
<li><a href="http://dicashot.blogspot.com.br/" target="_blank">Lista DicasHot</a></li>
<li><a href="http://dicashot.blogspot.com.br/" target="_blank">Lista DicasHot</a></li>
</ol>

Caso prefira, você pode também colocar o código em uma postagem, basta mudar do modo escrever para modo HTML e colar o código.

Se quiser aumentar o número de linhas da lista, basta acrescentar mais uma linha dessa entes do </ol>, assim:

<li><a href="http://dicashot.blogspot.com.br/" target="_blank">Lista DicasHot</a></li>
</ol>

Qualquer dúvida, não deixe de perguntar!