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;
}
.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 ♥
Visitando seu blog :-)
ResponderExcluirE já seguindooo, me segue de volta ta...bjs
http://mahmaquiagens.blogspot.com.br/
Oie! Obrigada por seguir! c:
Excluirnossa demais esse tutorial
ResponderExcluirvejam meu blog:
http://princessofjeans.blogspot.com.br/http://princessofjeans.blogspot.com.br/http://princessofjeans.blogspot.com.br/
Pois é, também gostei bastante dele!! haha'
ExcluirAdorei esse menu.
ResponderExcluirBem legal.
http://barbieseumundopink.blogspot.com.br
Abraços!
É legal mesmo!! haha'
Excluir