Efeito deslizante para blogroll

Oi gente, tudo bem com vocês? Hoje finalmente vou postar o tutorial de como se faz a blogroll daqui do blog, essa espécie de caixinha escrito "passe o mouse e veja blogs que merecem sua visita". Como já pediram bastante o tutorial, acho que está mais do que na hora de postá-lo, e desculpem a demora, aliás. T-T

Visualização

Tutorial

Vá em Modelo > Editar HTML e cole acima de ]]></b:skin>:

.deslizante {
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
background: #ffffff; /* Cor do fundo */
padding: 5px; /* Não mude */
width: 131px; /* Largura */
height: 82px; /* Altura */
position: fixed;
top: -68px; /* Sobe a caixinha*/
left: 50px; /* Afasta a caixinha da esquerda */
font-family: Tahoma;
font-size: 11px; /* Tamanho da fonte */
text-align: center; /* Alinhamento do texto */
-webkit-transition-duration: 0.80s;
}
.deslizante:hover {
top: 0;
}
.desim {
opacity: 0.6;
}
.desim:hover {
opacity: 1;
}

O "padding" irá acrescentar mais 10px na largura e na altura da caixa, lembre-se disso se for calcular.

Em "top", aonde está em negrito, coloque a altura apenas da parte da caixa que ficará escondida antes de passar o mouse.

Agora, num gadget html/javascript, cole:

<div class="deslizante">
<a href="URL" title="NOME"><img src="IMAGEM-30x30" class="desim" /></a>
<a href="URL" title="NOME"><img src="IMAGEM-30x30" class="desim" /></a>
<a href="URL" title="NOME"><img src="IMAGEM-30x30" class="desim" /></a>
<a href="URL" title="NOME"><img src="IMAGEM-30x30" class="desim" /></a>
<br/>
<a href="URL" title="NOME"><img src="IMAGEM-30x30" class="desim" /></a>
<a href="URL" title="NOME"><img src="IMAGEM-30x30" class="desim" /></a>
<a href="URL" title="NOME"><img src="IMAGEM-30x30" class="desim" /></a>
<a href="URL" title="NOME"><img src="IMAGEM-30x30" class="desim" /></a>
<br />
Blogroll
</div>

Todas as dicas no post são para caso você queira ir mudando a caixa, se não quiser mudar, não é necessário. Enfim, espero que tenham gostado do tutorial, qualquer dúvida é só comentar aqui <3