Menu Personalizado.

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>

Pronto seu menu esta deslumbrante. comentem, siga de suas opiniões estaremos sempre aqui lhe aguardando.

Postagens anteriores:

5 Comentarios

Comentem sugestões, criticas e etc. Tudo será muito bem aceito