Menu Com Imagem Em Hover


Olá gente ;D Esse tutorial é muito procurado, mas muitas vezes é tão complicado de se fazer! Mas eu encontrei um bem fácil para vocês que tal, vamos ver? Clique em Leia Mais e confira!
TUTORIAL

Tenha as imagens devidamente prontas. Veja o exemplo de menu aqui.

Design > Editar HTML

Procure por ]]></b:skin> e logo acima, cole este código já editado:


Edite os lugares necessários (url das imagens, tamanhos..) e salve.

Obs.: Sempre coloque o valor referente à metade da altura da imagem (para que apareça somente e primeira parte).

Agora, adicione o código do menu, em um Gadget HTML/JavaScript:

<div id='navigation'>
<ul>
<li><a href='Link do Blog/' id='m1' title='Home'> </a></li>
<li><a href='Link 01/' id='m2' target='_blank' title='Sobre'> </a></li>
<li><a href='Link 02/' id='m3' target='_blank' title='Goodies'> </a></li>
<li><a href='Link 03/' id='m4' target='_blank' title='Rádio'>
</a></li>
<li><a href='Link 04/' id='m5' target='_blank' title='Moda'>
</a></li>
<li><a href='Link 05/' id='m6' rel='nofollow' target='_blank' title='Contato'> </a></li>
</ul>
</div>

Edite os links e a informação que aparecerá no estado hover.

Espero que tenha funcionado ;D Tutorial do blog Templates Para Novo Blogger.