Tutorial - Menu Slip

Bom dia, pessoal.

Hoje ainda eu posto aquela coisa do All Star's para vocês votarem e aproveito e deixo a lista de inscrições para a avaliação de blogs que teremos duas vezes na semana, tudo bem? Sobre o sorteio de domínio, postarei ele ainda hoje, pois a Ana já confirmou. Como sabem, não haverá nenhum tipo de enrolação, nem sequer preciso ser administradora do blog para aplicar, só precisarei se a pessoa estiver com muita dificuldade em seguir as minhas instruções. Depois eu deixo mais informações. Será exatamente igual ao passado, mas com uma duração menor por causa do natal que já está muito próximo. 

Bom, trouxe um tutorial que já havia postado antes no For Your Blogger, mas que achei legal deixar nos arquivos do Kawaii World também, justamente por ser bastante útil para muita gente. Para quem está usando backgrounds duplos no estilo do meu, esse menu é super recomendado. O menu se cham Slip e apresenta apenas um efeito de "altura" onde ao passar o mouse, uma outra parte da imagem é revelada. Deixarei com vocês a preview que coloquei no blog de testes da Rafaah quando fui postar lá no outro blog. 

Clique aqui para visualizar. Se gostou, siga com o tutorial.

1. Faça as imagens que irá usar no programa de edição que preferir. Note que as imagens precisam ter uma palavra maior e um textinho menor que ficará escondido. Apronte tudo que irá usar e hospede. Precisaremos da medida em partes, portando, pegue a altura sem a parte do texto pequeno e a altura com tudo junto. Se não entendeu, é o seguinte:

Usaremos duas medidas: A altura somente da parte roxa, indicada pela linha verde e a altura da parte roxa e rosa (imagem toda) indicada pela linha preta. Entendem? É muito simples, já até tivemos um tutorial com o mesmo tipo de coisa.

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

.sliphome {

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

.sliphome:hover {height: 60px;}

Agora é a hora de substituir as medidas. No lugar de 130 você deve colocar o valor da largura da imagem, no lugar de 44 você deve colocar o valor da altura da parte "roxa" indicada no exemplo. Por fim, no lugar de 60 você deve colocar a altura de toda a imagem. Em linkdasuafoto, já sabe o que colocar.

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

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

Substitua e salve. Seu menu estará pronto. É claro que essa é só uma parte, para fazer as outras palavras você precisa repetir tudo e trocar "home" por outra coisa. Por exemplo: .sliphome, .slipfaq, .slipabout. Entendem? Boa sorte.