22 setembro 2013

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:

6 comentários:

  1. Ótimo tutorial,gostei
    http://dezapaixao.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. que bom que gostou, volte sempre, sempre vou postar tutoriais mara.

      Excluir
  2. Fico feliz que tenha gostado do menu

    ResponderExcluir
    Respostas
    1. Muito fofa sua visita aqui volte sempre querida.

      Excluir
  3. otimo tutorial, vou tentar fazer algum dia!

    ResponderExcluir

comentem sériamente, de opiniões e sugestoes. obrigado!!!! kleh s2