♦ Tutorial ~ Menu Lateral Passa o Mouse

  Hey pessoal!!!
 Trago um menu super divertido.
 É esse aqui olha:


 Ele fica quietinho ali no lado esquerdo do seu blog, e quando você passa o mouse ele se abre e mostra o conteúdo. É ótimo para quem quer ganhar espaço no blog e também porque é super bonito néh???
 Os créditos desse tutorial são para o Fluffy World
 Então venha aprender

No painel do seu blog vá em:

LAYOUT ADICIONAR UM GADGET HTML/JavaScript

O MENU ESTÁ NA COR ROSA

e cole esse código.
<div class="menuam">
<a rel="nofollow"><font style=" text-transform: none; font: italic 20px georgia;"><div align="left">Título do Blog</div></font></a>
<a href="/">volte ao início</a>
<a href="URL DA PÁGINA" onClick="changeNavigation;">NOME DA PÁGINA</a>
<a href="URL DA PÁGINA" onClick="changeNavigation;">NOME DA PÁGINA</a>
<a href="URL DA PÁGINA" onClick="changeNavigation;">NOME DA PÁGINA</a>
</div> 

<style>.menuam { width: 185px; padding: 13px; height: 100%; border-right: 8px solid #FF3E96; background: #FFC0CB; color: #; top: 0; margin: 0; position: fixed; left: -200px; height: 100%; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out; overflow: hidden; cursor: default; font-weight: normal; z-index: 12345; }
.menuam:hover { left: 0; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out; }
.menuam a { border: none; background: #FFFAFA; color:#FF69B4; padding: 5px; display: block; width: 100%; text-transform: uppercase; -webkit-transition: all .1s ease-out; -moz-transition: all .1s ease-out; -o-transition: all .1s ease-out; transition: all .1s ease-out; font-size: 7pt; margin: 5px -10px; text-shadow: 0 1px 1px #; }
.menuam a:hover { background: #919191; -webkit-transition: all .1s ease-out; -moz-transition: all .1s ease-out; -o-transition: all .1s ease-out; transition: all .1s ease-out; padding-left: 20px; }
.menuam a:first-child { margin-top: 10px; } .menuam a:last-child { margin-bottom: 0px; }
.menuam a { padding: 4px 6px; }</style>

ENTENDENDO
Essa primeira parte são os links do seu menu.

  • Título do Blog é o nome do seu blog
  • 20px Georgia é o tamanho e a sua fonte, mude se quiser
  • Repita o <a href="URL DA PÁGINA" onClick="changeNavigation;">NOME DA PÁGINA</a></div>  quantas vezes forem precisos 
  • Na gif tenho 4 codigos desses, sem contar o "voltar ao inicio"
A segunda parte é o menu em si

  • 8px solid #FF3E96 é a grossura e cor da borda *na gif a cor é azul*
  • background: #FFC0CB  é cor de fundo do menu *na gif é cinza*
  •  background: #FFFAFA  é a cor da barrinha que fica os links *na gif é branca*
  • color:#FF69B4 é a cor do nome do seu blog *na gif é preto*
  • background: #919191 é a cor da barrinha do link ao passar o mouse
 É só isso, espero que tenham entendido


Aqui tem uma tabela de cores Mx Studio.
Bye

14 comentários:

  1. Que lindo *-* obrigada por postar e está super bem espelicado nyah~~ adorei mesmo!

    ResponderExcluir
  2. Eu tava procurando esse tutorial, hoje pra pôr no meu novo layout e não achei! --' mas já fiz outro menu, esse fica pra próxima xD

    ResponderExcluir
  3. Ai esse menu é um meu preferido,muito lindo ele.
    lifeonalin.blogspot.com.br

    ResponderExcluir
  4. Tenho uma dúvida: Em vez desse menu, dá para colocar outras coisas?Por exemplo, parceiros, arquivo, entre outros...

    ResponderExcluir
    Respostas
    1. Este comentário foi removido pelo autor.

      Excluir
    2. Este comentário foi removido pelo autor.

      Excluir
    3. Deu certo,ou quase Cheque no meu blog teste:

      http://blogteste-julieta.blogspot.com.br/

      Deu certo os banners e links. Amei, mas tem uns espaços em branco,com links... não sei consertar...

      Excluir
  5. nao entendi onde coloca os codigos vc nao ensinou

    ResponderExcluir
  6. cara esse blog é muito perfeito, estou esperando bater a meta de 10 seguidores, assim que bater irei mudar o visual do meu blog e com certeza aqui será o primeiro lugar que virei para procurar goodies! Parabéns eu amo mt esse blog!! ♥

    Visite: http://out-gosh-space.blogspot.com.br/ ♥

    ResponderExcluir
  7. Cramba! Eu coloquei no meu blog , eu só não soube mexer direito com as URL's kk' , mais fora isso ficou perfeito :o
    Adorei seu lay , e também seus tutos :)

    { demetriaminhaprincesa.blogspot.com } < faz parceria ?

    ResponderExcluir
  8. Byel, tentei colocar mas não ta funcionando! A barrinha fica lá do lado, mas quando passa o mouse não desliza, o que aconteceu? ;3;

    ResponderExcluir