[Tutorial] Menu Simples

Oi de novo rs'

Yoo~!

Sim, estou postando duas vezes no mesmo dia, problema? q 

Reparei agora pouco que não postava um tutorial pra vocês a um tempo, e falando em tutorial, eu prometo que vou fazer a segunda parte do tutorial "Criando um template" ok? 

Hoje, trago a vocês o tutorial de como fazer esse menu fofo que temos aqui no ZC. Ele é bem simples de fazer, como diz o nome. Lembrando que, eu aprendi esse tutorial no Kawaii World, portando, créditos.

Vocês podem ter uma visualização desse menu aqui. É só procurar pelo nome nos gadgets ^-^

Certo, vamos deixar de enrolação e começar? :33

Primeiro, como quase todos os tutoriais, vá no modelo de seu blog > editar html > formatar modelo > e procure(ctrl f ou f3) por ]]></b:skin> . Acima da tag pesquisada, cole: 

@font-face { font-family: "silkscreen"; src: url('http://static.tumblr.com/0xqvkot/7jqmgsn0m/pf_arma_five.ttf'); }
a.menupequeno {
background-color: #e6e6e6;
padding-top: 3px;
padding-bottom: 3px;
display: inline-block;
width: 40px;
font-size: 8px;
font-family: silkscreen;
text-transform: uppercase;
text-align:center;
border: 1px solid #d1d1d1;
letter-spacing: 1px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
box-shadow: inset 0 0 5px #e3e6e7, 0 0 1px #b6b6b6;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
text-shadow: 0 1px 0 #ebebeb;
}
a.menupequeno:hover {
border: 1px solid #f994aa;
background-color: #ffc3d0;
text-decoration: none;
box-shadow: inset 0 0 0px #e3e6e7, 0 0 0px #b6b6b6;
text-shadow: 0 1px 0 #fbdae1;
opacity: 0.8;
}

Entendendo o código: Onde está em negrito(#e6e6e6) é a cor do menu sem o hover (quando passa o mouse em cima) e onde está em itálico(#ffc3d0), se refere a cor do menu com o hover.

Utilizando o menu: Crie um novo gadget de HTML e cole o código:

<center>
<a class="menupequeno" href="SEULINK">Nome</a>
<a class="menupequeno" href="SEULINK">Nome</a>
<a class="menupequeno" href="SEULINK">Nome</a>
<a class="menupequeno" href="SEULINK">Nome</a>
</center>

Se quiser adicionar mais um link ao menu, é só você copiar o código <a class="menupequeno" href="SEULINK">Nome</a> e colar antes do </center>. 

----------------------------#

É isso pessoas fofinhas, espero que esse tutorial tenha sido útil para a humanidade q, amanhã eu volto com mais posts pra vocês ok? c;