Menu Slip

Yo meus amorecos, em um pedido que recebi no ask, mostrarei a vocês como fazer o menu Slip. Esse tutorial eu encontrei lá no blog For Your Blogger então se usarem não esqueçam dos créditos. Esse menu o secreto dele e a altura, ou seja ele é uma imagem com 80 pixels de altura, porém você vai usar apenas 40 pixels da imagem para deixar a imagem pelo meio e quando passar o mouse, para fazer toda a imagem aparecer.

Primeiro criaremos uma imagem no padrão que eu mencionei, pode ser criado em qualquer editor Photoshop, Photoscape etc. Deixarei um modelinho abaixo, para vocês terem uma ideia. Faça um texto grande, onde ficara o nome que vai aparecer e abaixo um pequeno que ficara escondido,  só aparecera quando passarem o mouse, ou seja a descrição.

  1. Agora vamos ao seu HTML e lá procure por ]]></b:skin> e acima dela adicione esse codigo:

Códigos

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

Agora vamos substituir as medidas certas. Onde fica  133 você vai colocar o valor da largura da sua imagem, e no lugar de 47 você deve colocar o valor da altura da parte azul. No lugar de 85 você deve colocar a altura de toda a imagem. Em URL DA IMAGEM, coloque o endereço da imagem.


2. Agora vá em layout e abra um gadget HTML/JavaScript, e cole:

Códigos

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

Caso queira, adicionar mais você precisa repetir todo o primeiro código e trocar "home" por outra coisa. Por exemplo: .slipfaq, .slipfiliados e por ai vai, o que colocar no primeiro código precisa colocar dentro do gadget também.