30 de jan. de 2013

Menu Ioiô


Tumblr_m973zoqrw41qc83xro1_500_large
We♥It

Oi oi, unicórnios doces!!

Como estava sem inspiração, uma leitora do blog me pediu para postar algum tutorial de menu. Achei bem legal o que encontrei no I'll Help You. Chama menu Ioiô. Se conhecer esse estilo, Megan, me avise que posto outro a você. A preview, você confere aqui. Bem diferente, não é?!


→ Vá em Modelo >> Editar HTML >> Dê F3 e procure por  ]]></b:skin>.
Encontrou? Cole esse código antes.


}
.mennu {
font-family: verdana;
width: 60px;
height:15px;
float: left;
background: #e3c7f3; /* Cor do fundo*/
padding: 5px;
text-align: center;
text-shadow: 0 0px 0px #000; /* Cor da sombra*/
margin: 3px; 10px;
font-size: 9pt; /* Tamanho da fonte */
color: #777; /* Edite a cor da fonte */
border-radius:1px;
border-top: 2px solid #eee;
border-bottom: 2px solid #eee;
-webkit-transition-duration: .99s;
-moz-transition-duration: .99s;
}
.mennu:hover {
background: #ccacde; /* Fundo hover */
border-top: 2px solid #eee;
border-bottom: 2px solid #eee;
-webkit-transform: translate(2px, -51px);
-moz-transform: translate(2px, -51px);
-o-transform: translate(2px, -51px);
-webkit-transition-duration: .99s;
-moz-transition-duration: .99s;
}

Edite as partes destacadas em rosa e salve!

→ Depois de ter feito isso, vá em Layout >> Adicione um gadget HTML/JavaScript e cole:

<a href=" ENDEREÇO DO LINK"class="mennu"> <div style="color: #fff;">NOME DO LINK</div></a>
<a href=" ENDEREÇO DO LINK"class="mennu"> <div style="color: #fff;">
NOME DO LINK</div></a>
<a href=" ENDEREÇO DO LINK"class="mennu"> <div style="color: #fff;">NOME DO LINK</div></a>

<a href=" ENDEREÇO DO LINK"class="mennu"> <div style="color: #fff;">NOME DO LINK</div></a>

Altere as partes destacadas, visualize e depois salve!!

Espero ter ajudado! Se quiser mais menus, peça por comentários ou pela ask. Você que sabe!

Beijoos

6 comentários:

  1. Visitando seu blog :-)
    E já seguindooo, me segue de volta ta...bjs
    http://mahmaquiagens.blogspot.com.br/

    ResponderExcluir
  2. nossa demais esse tutorial

    vejam meu blog:
    http://princessofjeans.blogspot.com.br/http://princessofjeans.blogspot.com.br/http://princessofjeans.blogspot.com.br/

    ResponderExcluir
  3. Adorei esse menu.
    Bem legal.
    http://barbieseumundopink.blogspot.com.br
    Abraços!

    ResponderExcluir

Heey!! Se quiserem deixar o seu comentário, leia PLEASE aqui embaixo:

*Não xingue ninguém aqui! Seja educada(o)!
* Dúvidas, elogios e críticas são sempre bem-vindas!
* Leia toda a postagem, pois sempre faço com muito esforço e carinho pra vocês!
*Vou até o perfil de vocês para visitar e talvez até seguir o seu blog!

Obrigada por comentar!

Volte Sempre!