21/12/2012

Tutorial: 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 creditos. Esse menu o secredo 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 mensionei, pode ser criado em quanquer editor Photoshop, Photoscape etc. Dexarei 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.


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

.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.


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

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

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

Nenhum comentário:

Postar um comentário

Hi guys!!!!
Hey aqui é Wendy, blogueira desde 2010! Viciada em animes, amante de livros e adora ver séries! Criei esse cantinho na intenção de ajudar na criação e personalização de blogs e sites.
Wattpad Facebook Tumblr Instagram