Tutorial - Menu Guia

Olá novamente, lindjos :3

Bom, para o blog não ficar só com aquela postagem de "welcome back", fui tentar fazer um menusinho pra vocês e tal... Daí eu consegui fazer um bem cute, e eu acho que vocês vão gostar >3< Se chama Menu Guia. Esse é o meu primeiro menu, então não ficou aquelas "grandes coisa".. Mas espero que vocês gostem, ele é bem fofo :P Enfim, vamos logo ao tuto, né? rs Para visualizá-lo, cliquem aqui. ~♥~

1. Vá até seu HTML e procure por ]]></b:skin>

2. Depois de achar a tag, cole o seguinte código acima dela:

/* Menu Guia por Jéssica - Chovendo Diamante */
@font-face { font-family: "silkscreen"; src: url('http://static.tumblr.com/0xqvkot/7jqmgsn0m/pf_arma_five.ttf'); }
menuguia{
background: #cor de fundo;
padding: 7px;
width: 25%;
font-family: "silkscreen";
font-size: 8px;
color: #cor da fonte;
-moz-border-radius-topleft: 7px;
-moz-border-radius-topright:7px;
-moz-border-radius-bottomleft:0px;
-moz-border-radius-bottomright:0px;
-webkit-border-top-left-radius:7px;
-webkit-border-top-right-radius:7px;
-webkit-border-bottom-left-radius:0px;
-webkit-border-bottom-right-radius:0px;
border-top-left-radius:7px;
border-top-right-radius:7px;
border-bottom-left-radius:0px;
border-bottom-right-radius:0px;
-webkit-transition-duration: .80s;
}
menuguia:hover{
background: #B0C4DE;
padding: 7px;
width: 25%;
color: #fff;
-moz-border-radius-topleft: 56px;
-moz-border-radius-topright:56px;
-moz-border-radius-bottomleft:0px;
-moz-border-radius-bottomright:5px;
-webkit-border-top-left-radius:56px;
-webkit-border-top-right-radius:56px;
-webkit-border-bottom-left-radius:0px;
-webkit-border-bottom-right-radius:5px;
border-top-left-radius:56px;
border-top-right-radius:56px;
border-bottom-left-radius:0px;
border-bottom-right-radius:5px;
-webkit-transition-duration: .80s;
}

3. Substitua apenas os códigos destacados de negrito. Depois disso salve.

4. Agora para usar o menu, cole o código abaixo em um gadget de HTML/JS:

<a href=" LINK "><menuguia>Nome</menuguia></a>
<a href=" LINK "><menuguia>Nome</menuguia></a>
<a href=" LINK "><menuguia>Nome</menuguia></a>
<a href=" LINK "><menuguia>Nome</menuguia></a>

5. Altere o que se pede em negrito e pronto. Seu menu vai estar no seu blog bem fofinho >3<

Espero que tenham gostado *w*

Kissus ♥