Olá atrevidinhas hoje eu trouxe um tutorial mara que adquiri la do Princess tutorial é o Menu Luv Insane, esse menu é super legal confira aqui, nele você deixa seu blog mais lindo e sofisticado confira:
Primeiramente procure por pela tag ]] ></b:skin> e copie o código abaixo antes da tag.
/**** Menu Luv Insane - by: daniideutscher.tumblr ***/
.menuluvinsane {
margin-top: 12px;
background: #ffc0c0; /* Cor da Caixa do menu */
border-radius: 2px; /* Tamanho o arredondamento da caixa */
overflow: hidden;
width: 400px; /* Tamanho da caixa do Menu */
box-shadow: 2px -5px #ff8080, 5px -10px #D64242; /* Crie um efeito degrade, a primeira cor clara, e a segunda mais escura */
}
.menuluvinsane a {
display: inline-block;
float: left;
text-decoration: none;
text-align: center;
color: #fff; /* Cor do link o menu */
font: bold 22px economica; /* Estilo, tamanho, e fonte dos links */
font-variant: small-caps;
text-transform: lowercase;
padding: 4px;
width: 70px; /* Tamanho de cada link */
text-shadow: 2px 1px 2px #d64242 inset 2px 1px 2px #d64242; /* Sombra nos links */
-webkit-transition-duration: .80s; -moz-transition-duration: .80s; -o-transition-duration: .80s; -ms-transition-duration: .80s; transition-duration: .80s;
}
.menuluvinsane a:hover {
background: #D64242;
text-shadow: 0px -5px #fc0c0, 0px 5px #ffc0c0; /* Sombras duplicadas, coloque as duas cores iguais */
}
Ai se quiser personalizar as cores vá em background e deixe ele com a sua cor, veja as descrições ao lado dos códigos.
Ai você cola o codigo abaixo antes de </head>
<link href='http://fonts.googleapis.com/css?family=Economica' rel='stylesheet' type='text/css'/>
Depois que tudo estiver pronto, vá em salvar modelo.
Feito isso vá em adicionar gadget, clique em: gadget HTML/JAVA SCRIPT, e cole o código abaixo
<div class="menuluvinsane">
<a href="/">Home</a>
<a href="/">About</a>
<a href="/">Godies</a>
<a href="/">Textos</a>
<a href="/">Tutoriais</a>
</div>
Primeiramente procure por pela tag ]] ></b:skin> e copie o código abaixo antes da tag.
/**** Menu Luv Insane - by: daniideutscher.tumblr ***/
.menuluvinsane {
margin-top: 12px;
background: #ffc0c0; /* Cor da Caixa do menu */
border-radius: 2px; /* Tamanho o arredondamento da caixa */
overflow: hidden;
width: 400px; /* Tamanho da caixa do Menu */
box-shadow: 2px -5px #ff8080, 5px -10px #D64242; /* Crie um efeito degrade, a primeira cor clara, e a segunda mais escura */
}
.menuluvinsane a {
display: inline-block;
float: left;
text-decoration: none;
text-align: center;
color: #fff; /* Cor do link o menu */
font: bold 22px economica; /* Estilo, tamanho, e fonte dos links */
font-variant: small-caps;
text-transform: lowercase;
padding: 4px;
width: 70px; /* Tamanho de cada link */
text-shadow: 2px 1px 2px #d64242 inset 2px 1px 2px #d64242; /* Sombra nos links */
-webkit-transition-duration: .80s; -moz-transition-duration: .80s; -o-transition-duration: .80s; -ms-transition-duration: .80s; transition-duration: .80s;
}
.menuluvinsane a:hover {
background: #D64242;
text-shadow: 0px -5px #fc0c0, 0px 5px #ffc0c0; /* Sombras duplicadas, coloque as duas cores iguais */
}
Ai se quiser personalizar as cores vá em background e deixe ele com a sua cor, veja as descrições ao lado dos códigos.
Ai você cola o codigo abaixo antes de </head>
<link href='http://fonts.googleapis.com/css?family=Economica' rel='stylesheet' type='text/css'/>
Depois que tudo estiver pronto, vá em salvar modelo.
Feito isso vá em adicionar gadget, clique em: gadget HTML/JAVA SCRIPT, e cole o código abaixo
<div class="menuluvinsane">
<a href="/">Home</a>
<a href="/">About</a>
<a href="/">Godies</a>
<a href="/">Textos</a>
<a href="/">Tutoriais</a>
</div>
Pronto seu menu esta deslumbrante. comentem, siga de suas opiniões estaremos sempre aqui lhe aguardando.
Postagens anteriores:
5 Comentarios
que bom que gostou, volte sempre, sempre vou postar tutoriais mara.
ResponderExcluirFico feliz que tenha gostado do menu
ResponderExcluirMuito fofa sua visita aqui volte sempre querida.
Excluirotimo tutorial, vou tentar fazer algum dia!
ResponderExcluirtenta sim ele é muito bom.
ExcluirComentem sugestões, criticas e etc. Tudo será muito bem aceito