TUTORIAL-menu igual o do blog

                   
BOA TARDE!!
Hoje vou  ensinar a por um menu igual o nosso,é bem complicado pois tem um código pra cada quadrinho!
Ele é do kawaii world mais pra ficar mais fácil de encaixar ele na página de tutos vou por o nome de JUNTO E MISTURADO que é o nome desse design,ok?
Bom,se você ainda estiver curioso clique em leia mais...

1-Procure por ]]></b:skin> e acima da tag cole:

#menu a.home{

-webkit-transition-duration: .50s; 

background: url(LINK DA IMAGEM DO BOTÃO)no-repeat; overflow: hidden; 

width: 130px; 

height: 40px; 

display: inline-block; 

} 

#menu a.home:hover{

background-position: 0 -40px;

}

- Entendendo o código:

.50s  - Troque o 50 por um número maior para aumentar o tempo de transição de uma imagem para outra.

Link da imagem do botão - Exatamente o que diz.

130px - Largura.

40px - Altura.

 

2-

Em um gadget de HTML/JavaScript, cole:

<div id="menu">
<a href="SEU LINK" class="home"></a>
</div>

Este é o código de apenas um botão, para adicionar outros você repete tudo, fazendo as alterações a seguir:

Vamos supor que você vá fazer agora um botão de faq. Repita tudo e troque todas as palavras HOME do passo 1 por faq, como deseja.

Repita o '<a href="SEU LINK" class="home"></a>' ainda dentro da div, trocando home por faq, assim:

<div id="menu">

<a href="SEU LINK" class="home"></a>

<a href="SEU LINK" class="faq"></a> 

</div>

Espero que tenham compreendido!

AGORA vejam a imagem usada no nosso template passado para vocês usarem:

CRÉDITOS DE CÓDIGOS E IMAGENS PARA O MENU: KAWAII WORLD