27 de jan. de 2013

Tutorial-Menu Hover Deslizante


Heey jude ! Eu tô muito animada (claro que triste também, pelo que aconteceu hoje, força para as famílias), depois do almoço divo que eu comi hoje. Era Frago Assado com Potatoes! Ai, tava maravilhoso, mas vamos fazer o que é pra ser feito, ou seja, ensinar como fazer o menu! Clique em Leia Mais para ver!

Então, vamos começar o tutorial?
1. Vá em HTML, aperte Ctrl+F e procure por ]]></b:skin> . Depois de encontrada, cole o código abaixo acima da tag procurada. 
.heart {display : block; font-size: 10px;font-family: Tahoma;letter-spacing : 0;border-bottom : 1px solid #eee;background-repeat : no-repeat;   text-indent : 5px;vertical-align : middle;text-decoration : none; line-height : 15px;margin-bottom : 1px;padding-left : 3px; -webkit-transition: all 0.9s ease-out; -moz-transition: all 0.9s ease-out;border-left: solid #CORDABORDA;background: #CORDOFUNDO; color: #666 !important;}.heart:hover {display : block;text-decoration: none; vertical-align: middle;line-height: 15px;background: #CORDOFUNDOHOVER; border-left: solid #CORDABORDAHOVER; padding-left: 15px;}
2.Troque as partes em negrito e salve.
3. Abra um gadget HTML/Java e cole esse código:
<div class="heart"> Seu texto </div>
 4. Substitua pelo que se pede e pronto!
Espero que tenham gostado e ~enjoy!
Créditos: <3

Nenhum comentário:

Postar um comentário