Oláaa meu povo lindo!!!  Nossa, quantas saudades!!! Peço mil desculpas pela ausencia, pois esse periodo de verão aqui na Europa é quando mais trabalhamos... alem disso ainda tenho um fila de layouts para personalizar rs e tambem desenvolvo o projeto Inifity line (aquele de doacoes mutuas - para quem quer ter uma renda extra) e põe extra nisso... 2mil reais no bolso hehe em apenas alguns dias... depois falo mais sobre isso!

Hoje vim trazer um tutorial muito bacana e que deixa o blog com um jeitinho todo especial e diferente, que é o Menu com Imagens em Hover!!!
Veja o exemplo no Blog da Fran Adorno eu mesma personalizei o layout dela.
Quer aprender como faz? Então venha comigo...

Os créditos desse tutorial vai para Go Imagine.

Vá em Design / Layout e em elementos da página adicione um gadget de HTML/JavaScript e cole o seguinte código fazendo as devidas alterações:

<a href="link do seu blog"><img src="URL da imagem normal" onmouseout="this.src='Repita a URL da imagem normal';" onmouseover="this.src='URL da imagem no estado hover';" /></a> Observações:

1. Onde pede "link do seu blog" troque pelo link da página que você desejar.
2. No lugar de "URL da imagem normal" é a url da imagem sem passar o mouse e onde pede "repita a URL da imagem normal" é a mesma coisa.
3. Já em "URL da imagem no estado hover" coloque a imagem que você quer que apareça ao passar o mouse.
4. Se você quiser o menu centralizado é só colocar as tags do começo e do fim, <center> e </center> respectivamente.

Lembrando que você vai usar duas imagens para cada seção, ou seja, uma imagem normal e uma hover ou com inclinação, que ao passar o mouse a imagem se mecha, igual ao Blog da Fran que deixei o link a cima para voces conferirem! Um abraço a todas vocês!!!