Menu Slip

Boa Noite pessoas !

Eu passei meio que o dia sem postar porque eu estou sem idéias e não acho também nada legal e útil pra vocês ! E então quando eu menos esperava encontrei um blog que eu nunca tinha visto, eu conheci ele através do IIRTW, então decidi visitar esse blog e amei muito ! Muitas coisas novas nele ! Ai eu pensei, agora sim achei uma coisa bem legal para eu passar para os meus leitores ! O tutorial é de um menu chamado Slip. Eu encontrei esse tutorial no For You Blogger (www) então créditos á ele ! Para ver a live preview clique aqui ! Viu como é um menu bonito, legal e útil ? Então vamos aprender como fazer !

~Enjoy~

1. Primeiro você precisa preparar a imagem que irá usar e separar as medidas. Se você for fazer um menu com muitas imagens, precisará repetir várias vezes o tutorial, pois ele serve para cada uma. Crie sua imagem normalmente, com uma palavra grande e a pequena que ficará escondida. 

2. Vá até editar HTML e acima da tag ]]></b:skin>, cole o seguinte código:

.sliphome {
float:left; width: 130px; height:44px; -webkit-transition-duration: .90s; background:url(linkdasuafoto) no-repeat;}
.sliphome:hover {height: 60px;}

Pegue sua imagem e olhe as medidas, no meu caso o menu tem 130 de largura. Em sliphome, no lugar de 44px coloque a altura da imagem somente até o fim da palavra grande, sem a palavra menor. Em sliphome:hover coloque a altura de toda a imagem. Troque o linkdasuafoto pela url da imagem.

3. Agora é a parte mais fácil. Em um gadget de HTML/JavaScript, cole:

<a class="sliphome" href="seulinkaqui"></a>

É só isso, espero que eu tenha explicado bem para vocês. Qualquer dúvida, não hesite em me contactar e perdoem-me pela postagem longa. 

Então é isso gente, espero que vocês tenham gostado desse tuto !