♦ 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