Como fazer um Menu Cute

Hey! Quem mexe em HTML de tumblr ou tem uma noção sobre isto, sabe que vários tutoriais de tumblr funciona no blogger, basta saber onde colocar o codigo no blogger *-*
Eu já tentei colocar este menu cute no blog, só que eu não conseguia, de algum jeito dava erro. Hoje, visitando o tumblr Desings Forever, encontrei um menu e resolvir testar no meu blog de testes e deu certo.
Para visualizar o menu clique aqui.

Meu menu ficou assim

Fica muito fofo e é bem fácil de colocar no blog e modifica-lo. Vamos aprender? *o*
Aperte Ctrl+F e escreva

]]></b:skin>

Acima desta tag coloque a primeira parte do codigo que é quando o menu esta estatico

.menucute {
margin-bottom: 1px;
display: block;
padding-bottom : 2px;
font-size: 10px; /*** Tamanho da fonte **/
font-family: verdana;
letter-spacing: 0;
line-height: 15px;
border-bottom: 1px solid #eee; /*** Cor e estilo da linha **/
vertical-align: middle;
text-indent:5px;
text-indent: 5px;
background: url('http://drikoti.net/Goodies/Favicons/Gifs/044.gif')no-repeat left; /*** url do seu mini gif ***/
background-repeat: no-repeat;
padding-left: 10px;
text-decoration: none;}

Agora coloque em seguida este codigo que é quando o mouse esta em cima do menu

.menucute:hover {
margin-bottom: 1px;
display: block;
font-size: 10px;  /*** Tamanho da sua fonte quando o mouse esta em cima ***/
font-family: verdana;
letter-spacing: 0;
line-height: 15px;
border-bottom: 1px solid #eee;  /***Cor e estilo de linha quando o mouse esta em cima ***/
text-indent: 5px;
vertical-align: middle;
background: url('http://drikoti.net/Goodies/Favicons/Gifs/022.gif')no-repeat left; /*** url do mini gif quando o mouse esta em cima ***/
background-repeat: no-repeat;
padding-left: 10px;
text-indent: 5px;
text-decoration: none;
padding-bottom: 2px;}

 Explicando o que esta em vermelho
1 px é a espessura da linha que fica em baixo
Solid é a borda que no caso é a solida, a 'reta', a 'normal'
#eee; é a cor da linha

Tipos de borda: 

Existem algumas bordas, mas as mais conhecidas são a Solid é a borda sólida. Se você quiser pontilhada, use dotted. Se quiser tracejada, use dashed. E se quiser dois traços sólidos, use double (O valor pra ficar dois traços precisa ser a partir de 3px)

Alguns mini gifs você pode encontrar aqui, aqui, aqui.

Tabela de cores aqui

Obs: Não se esqueça de apagar o que esta em lilas ok?! *-*

Como colocar no blog?

Até agora você colocou o codigo no HTML do seu blog. Para que funcione você vai em design e adiciona um gadget HTML/Java Script

Se você quiser que o menu seja em link coloque este codigo:

<div class="menucute"> <a href="LINK_AQUI">TITULO </a></div>

Se você apenas quiser  apenas escrever alguma coisa coloque:

<div class="menucute"> ESCREVA_AQUI</div>

Se quiser mais links só ir repetindo o codigo morzim *-*

Creditos: 
[www] Explicação dos tipos de borda e imagem
[www] Tutorial do menu
 Espero que tenham gostado *---*
Duvidas?

Bezôôs,

Erica Judd ♥