Cute Menu para goodies

Oi pessoal!!! Consegui meu computador de volta depois de uma semana, que por sinal parecia uma eternidade... Alguns de vocês devem ter reparado que coloquei uma enquete na barra lateral do blog perguntando sobre o que devemos postar mais. Então, de acordo com os assuntos mais votados, eu irei postando. Depois de postar sobre cada um, farei um post com os links da enquete!!! (meio confuso, né?) Bom, agora vamos ao tutorial!!! Lembrando que o tutorial é do blog Farry Teen.

 Cute Menu para goodies

clique aqui para ver o print

1. Vá no HTML do seu blog, aperte F3 e procure por ]]> e logo acima, cole isso:

/*** Menu de goodies ***/
.goodies {
display: block;
font-size: 8pt; /* tamanho da fonte */
font-family: verdana; /* nome da fonte */
line-height: 15px;
border-bottom : 1px solid #f4f4f3; /* estilo e cor da borda */
text-indent: 5px;
vertical-align: middle;
background: url('http://i339.photobucket.com/albums/n464/herycka20/mc08.gif') no-repeat left; /* URL do mini gif normal */
padding-left: 10px;
padding-bottom: 2px;
}
.goodies:hover {
display: block;
border-bottom: 1px dashed #E0DCD6; /* Cor da borda hover */
vertical-align: middle;
padding-left: 10px;
padding-bottom: 2px;
background: #ebebeb url('http://i339.photobucket.com/albums/n464/herycka20/mc09.gif') no-repeat left; /* Cor do fundo e url do mini gif hover */
}

Depois, é só salvar. Agora, para o menu aparecer é só colar esse código, onde quer que ele fique:

<div style="float: left; width: 49%;">
<div class="goodies">
<a href="URL_AQUI">TÍTULO 1</a> </div>
<div class="goodies">
<a href="URL_AQUI">TÍTULO 2</a> </div>
<div class="goodies">
<a href="URL_AQUI">TÍTULO 3</a> </div>
<div class="goodies">
<a href="URL_AQUI">TÍTULO 4</a> </div>
</div>
<div style="float: right; width: 49%;">
<div class="goodies">
<a href="URL_AQUI">TÍTULO 1</a> </div>
<div class="goodies">
<a href="URL_AQUI">TÍTULO 2</a> </div>
<div class="goodies">
<a href="URL_AQUI">TÍTULO 3</a> </div>
<div class="goodies">
<a href="URL_AQUI">TÍTULO 4</a> </div>
</div>