Tutorial - Menu Slip

Good night people ~~ 

Á pedido na ask, hoje ensinarei á vocês, como fazer esse menu que eu uso. 

Esse menu eu encontrei lá no For Your Blogger então se usarem creditem eles.

Mais antes da postagem, quero pedir para que vocês continuem curtindo nossa página no facebook aqui! 

Mais em fim voltando ao tutorial, o menu ele usa um efeito de altura, ou seja ele é uma imagem de 80 pixels de altura, mais ele vai usar apenas 40 pixels da imagem para deixar a imagem no meio e quando passar o mouse, toda a imagem aparecer.

Vamos lá :)

1. Primeiro crie sua imagem em qualquer editos de imagem, Photoshop, Photoscape etc. Seguindo o modelo a seguir, faça um texto grande, onde será o nome, e um textinho pequeno embaixo que ficará escondido e representará a descrição:

Usaremos duas medidas: A altura somente da parte azul, e a altura da parte azul e rosa (imagem toda). Entendem ? É muito simples.

2. Vá até Modelo > Editar HTML e procure por ]]></b:skin>. Acima dessa tag, cole o seguinte:

.sliphome {

float:left; width: 133px; height:47px; -webkit-transition-duration: .90s; background:url(LINK DA IMAGEM) no-repeat;}

.sliphome:hover {height: 85px;}

Agora vamos substituir as medidas. No lugar de 133 você deve colocar o valor da largura da imagem, no lugar de 47 você deve colocar o valor da altura da parte "azul" indicada no exemplo. Por fim, no lugar de 85 você deve colocar a altura de toda a imagem. Em LINK DA IMAGEM, coloque a url da sua imagem.

3. Agora em um gadget de HTML/JavaScript, cole:

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

Salve e pronto. Seu menu estará pronto.

OBS: Para fazer as outras palavras você precisa repetir tudo e trocar "home" por outra coisa. Por exemplo: .sliphome, .slipfaq, .slipabout. etc...