23 de dezembro de 2012

Menu 'Hover'

Olá galera, estou de volta com os tutoriais de 'HTML' agora prometo postar mais coisas de html.

Então o menu que eu vou ensinar é um menu hover deslizante é super usando o tutorial é do tumblr HTMLuv, os créditos são todos deles, e a adaptação eu que fiz, como eu disse antes agora vou postar mais coisas de html, para atualizar nossas tag né. Vamos ao tuto?

O Menu é esse:

Primeiro vá no HTML do seu blog, e de um Ctrl 'F' e procure por ]]></b:skin>, e ACIMA dele cole este código:
.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 #000; background: #f0f0f0; color: #666 !important;}
Agora vá adicionar um gadget 'HTML/Javascript' e cole isso:
<div class="heart"> O que quer escrito</div>
<div class="heart"> O que quer escrito</div>
<div class="heart"> O que quer escrito</div>
<div class="heart"> O que quer escrito</div>
E pronto visualize se estiver tudo certo é só salvar.

Um comentário: