Cute Menu

Hoje o post saiu cedo! Estava pensando em fazer um tutorial para vocês e como várias pessoas elogiaram o jeito como coloquei os links da página de arquivo e de parceiros, vim lhes ensinar como fazer esse tipo de menu.

     O Cute Menu é aquela lista de links que fica com um gif e quando você passa o mouse aparece outro, fica muito legal, pois deixa seu blog super bonito.
     Para utilizar ele você vai em Design no painel do Blogger e depois em Editar HTML, aperte Ctrl+F e procure por ]]></b:skin>
     Depois que encontrar cole esse código logo acima:

/* Cute Menu
----------------------------------------------- */
#menuextra {
display : block;
font-size: 13px;
font-family: tahoma;
letter-spacing : 0;
border-bottom : 1px dashed #FFFFFF;
background-repeat : no-repeat;
text-indent : 5px;
vertical-align : middle;
text-decoration : none;
line-height : 15px;
margin-bottom : 1px;
background : url ('URL DO GIF SEM O MOUSE POR CIMA') no-repeat left;
padding-left : 10px;
}


#menuextra:hover {
display : block;
text-decoration : none;
vertical-align : middle;
line-height : 15px;
border-bottom : 1px dashed #FFC0CB;
background : url ('URL DO GIF QUANDO O MOUSE ESTIVER EM CIMA') no-repeat left;
padding-left : 10px;
}

     Seu HTML tem que ficar igual a imagem:

     Então vamos para as alterações que precisam ser feitas:

     Onde estiver font-size você pode mudar o tamanho da letra aumentando ou diminuindo o número que está  lá, eu acho que 13 do jeito que está fica bom, mas você quem sabe.

     Eu uso a fonte tahoma mas você pode mudar a fonte do seu menu trocando de tahoma pra qualquer outra ao lado de onde estiver font-family.

     Onde estiver #FFFFFF você muda para a cor que quiser que seja a linha que ficará em baixo do link sem o mouse estar por cima e onde estiver #FFC0CB muda para a cor que essa linha ficará quando o mouse estiver por cima.

     Também tem que colocar o url dos gifs onde está indicado. Você pode encontrar mini gifs legais nesses sites:
Evelyns Place
Place Fame Extras
Trechy Teen

     Agora acabamos a parte dos códigos e vou ensiná-los como utilizar esse tipo de menu:

     Para utilizar o menu você só tem abrir o gadget ou a postagem onde você quer utilizá-lo e colar o seguinte código:

<div id="menuextra"><a href="http://www.blogger.com/Link">Nome do link</a></div>

     Você repete o código quantas vezes precisar e substitui http://www.blogger.com/Link e Nome do link pelo url e pelo nome do link que você for colocar.
     Vai ficar assim, aí você substitui o nome do link e a url:

Nome do link

Nome do link

Nome do link

Qualquer dúvida pode colocar nos comentários que eu te respondo.