Colocando um Cute Menu. ♥

Atualizado no dia 05/09/2011

Oii! Hoje vou ensinar como deixar o menu do seu blog mais kawaii. Eu acho que esses menus dão uma cara mais femininas, organizadas e fofinhas ao blog. Bom, o tutorial não é difícil, mas da uma certa preguicinha de fazer, mas o resultado é lindo. Eu achei esse tutorial no Trechy Teen. Clique em Continue Lendo para ver o tutorial.

1º Passo:

Bom, primeiro você vai em design, editar HTML e vai procurar a tag ]]></b:skin>

Achou? Ok, agora logo ACIMA de ]]></b:skin>, cole o código abaixo:


/* Cute Menu
----------------------------------------------- */
#menuextra {
display : block;
font-size: 11px;
font-family: Tahoma;
letter-spacing : 0;
border-bottom : 1px dashed #D3D3D3;
background-repeat : no-repeat;
text-indent : 5px;
vertical-align : middle;
text-decoration : none;
line-height : 15px;
margin-bottom : 1px;
background : url('URL-DO-MINIGIF-1') 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-MINIGIF-2') no-repeat left;
padding-left : 10px;
}




2º Passo: Agora, substitua URL-DO-MINIGIF-1 pelo mini gif que vai aparecer quando o cursor não estiver no link.

Substitua URL-DO-MINIGIF-2 pelo mini gif que vai aparecer quando o cursor estiver no link.

Aqui nós temos alguns mini gifs que podem ser usados no Cute Menu:

- Mini Gifs

3º Passo: Substitua #D3D3D3 pela cor da linha pontilhada quando o cursor não estiver no link.

Substitua #FFC0CB pela cor da linha quando o cursor estiver sobre o link.

Assim que terminar salve.

Como utilizar:


Okaay, agora que a gente ja personalizou o cute menu, teremos que colocar os links né?? Bom, para fazer os links ficarem com o cute menu, seja em postagem, página ou gadget, vá em editar html e cole o seguinte código:



<div id="menuextra"><a href="Link ">Nome do link</a>
</div>
<div id="menuextra"><a href="Link">Nome do link</a></div>

Substitua onde está escrito Link, pelo link, e Nome do Link, pelo nome do link. Depois é só ir adicionando os códigos e ir modificando, depois salve. 

Espero ter ajudado! Bjss