• - ChapStique -

    - ChapStique -

  • - Crouton -

    - Crouton -

  • - Nadaddy -

    - Nadaddy -

  • - Fatty -

    - Fatty -

  • - Hollywood -

    - Hollywood -

14 de novembro de 2012

Tutorial - Menu Beauty


Que saudade! :3 

Fui dando uma olhada em tumblrs de HTML e achei o menu beauty. Irei ensinar a vocês, visualize-o aqui. Desculpem não estar postando o suficiente aqui, mas eu estava criando o novo layout do meu blog, prometo que agora tudo voltará ao normal. Então, vamos ver o menu? Lembrando que os créditos são para o tumblr I Love Banner, então, credite o AN e o tumblr se usar ou reblogar, já que eu que mudei os códigos de tumblr para blogger. Enjoy!

Vá no seu HTML e procure por ]]></b:skin>. Acima da tag, cole:
Visualize o código clicando aqui.
Agora adicione um gadget de HTML/JavaScript e nele, cole:
<a href="LINK1"><div class="menu" onmouseover="this.innerHTML='TEXTOHOVER'">TEXTO</div></a><a href="LINK2"><div class="menu" onmouseover="this.innerHTML='TEXTOHOVER'">TEXTO</div></a><a href="LINK3"><div class="menu" onmouseover="this.innerHTML='TEXTOHOVER'">TEXTO</div></a> 
Entendendo o código:

'LINK1' = link da página. (ex.: adubadu.blogspot.com.br/p/vagas-saiba-mais.html ou huhuhu.blogspot.com.br/p/contato.html)

'TEXTOEMHOVER' = Texto de quando você passa o mouse em cima do menu. (ex.: About, Contato, Home)

'TEXTO' = Texto de quando você não está com o mouse em cima do menu, recomendo colocar números, como 01, 02, 03.

Se quiser adicionar mais páginas, é só ir colocando isso: <a href="LINK1"><div class="menu" onmouseover="this.innerHTML='TEXTOHOVER'">TEXTO</div></a> um embaixo do outro.

2 comentários: