Menu para posts populares

Oi, tudo bem com vocês? Para o post de hoje, fiz um menu para posts populares com efeito. Ao contrário da maioria dos menus como esse, ele não precisa de nenhuma imagem, o que torna mais simples e fácil de usar.

Clique aqui para visualizar o menu

Primeiro, cole acima de ]]></b:skin> esse código:

.destaques {
background: #f6f6f6;
border-radius: 3px;
padding: 5px;
margin: 3px 0;
border-bottom: 1px solid #eaeaea;
-webkit-transition-duration: 0.40s;
}
.destaques:hover {
background: #ffffff;
border-bottom: 1px solid #ffffff;
padding-left: 16px;
}
.destaques number {
background: #7ccdff; /* Cor do número */
border-radius: 3px;
padding: 2px 3px;
color: #ffffff;
font-size: 10px;
}
.destaques a {
color: #aaaaaa;
}
.destaques a:hover {
text-decoration: none;
border-bottom: 1px dotted #7ccdff;
}

Agora, cole num gadget "HTML/JavaScript":

<div class="destaques"><number>1</number> <a href="link-do-post-1">Título do post</a></div>
<div class="destaques"><number>2</number> <a href="link-do-post-2">Título do post</a></div>
<div class="destaques"><number>3</number> <a href="link-do-post-3">Título do post</a></div>
<div class="destaques"><number>4</number> <a href="link-do-post-4">Título do post</a></div>
<div class="destaques"><number>5</number> <a href="link-do-post-5">Título do post</a></div>

Espero que tenham gostado, bjs!