22/01/2013

Menu Uops!

Tumblr_mh1nv6s4mg1rmqvoqo1_500_large

Oláááá! Tudo bem? Estou fazendo um layout novo para o blog õ/ Vou por ele no dia 26, que é o aniversário do blog! Enfim, vamos direto ao assunto, trouxe um tutorial de um menu que eu peguei lá no Kawaii World. É super fácil de fazer e muito lindo, vamos ver?


Para visualizar o menu clique aqui.

Vá em Editar HTML e procure por ]]><b:skin (clicando Ctrl+f), e cole esse código acima dessa tag que você procurou:

.simplemenu {cursor: pointer; font-family: Georgia; position: absolute; width: 700px; margin-top: 28px; height: 62px; font-size: 16px; letter-spacing: 1px; overflow: hidden; font-style: italic; margin-left: 90px;} .simplemenu a {color: #ffcbcb; padding-left: 29px; padding-right: 11px;text-shadow: 0px -100px 1px #94d0cf; padding-top: 58px; -webkit-transition: all 0.8s ease; -moz-transition: all 0.8s ease;-o-transition: all 0.8s ease;}.simplemenu a:hover {color: transparent; padding-left: 29px; padding-right: 11px; text-shadow: 0px 0px 0px #94d0cf; -webkit-transition: all 0.8s ease; -moz-transition: all 0.8s ease; -o-transition: all 0.8s ease;} 

Agora para concluir, adicione um gadget de HTML/JavaScript e cole o seguinte código: 

<div class="simplemenu">
<a href="#">Home</a>
<a href="#">Ask</a>
<a href="#">Tutoriais</a>
<a href="#">Materiais</a>
<a href="#">Faq</a>
<a href="#">Themes</a>
<a onMouseover="this.style.background='#'" onMouseout="this.style.background='#'" onClick="document.getElementById('main').innerHTML=document.getElementById('leia').innerHTML" title=":)">IFRAME</a>
</div>

No lugar de "#" coloque o link, e as cores você pode mudar como quiser. Fácil não? Qualquer dúvida pergunte e eu tento te ajudar ^.^ Até a próxima!

4 comentários:

  1. Estou ansiosa pro novo layout!! Achei o menu super lindo!!

    Beijos!
    http://productions-ofdreams.blogspot.com/

    ResponderExcluir
  2. Olá Bom Dia !!!
    somos as integrantes de G1T , uma nova banda que eu e minha amigas estamos construindo,precisamos de sua ajuda,pode publicar a gente, se não poder me avise em G1T-Official, espero por você e siga também já vou seguir aqui ok ... espero atenciosamente ...

    ResponderExcluir
  3. Ansiosa pelo novo lay, sei que vai ficar lindo *--*
    O menu é muito fofo, adoro! >.<
    Beijo
    ill-helpyou.blogspot.com

    ResponderExcluir
  4. Estou ansiosa pro novo layout do blog! Amei o menu, muito perfeito. Já conhecia ele lá no KW. :)

    Até, chassy-bomb.blogspot.com.

    ResponderExcluir