Andrêssa Agnel: Menu em imagem com efeito hover.

Olá povo lindo. Quem ai ta afim de aprender a fazer aquele menu lindo das blogueiras famosas? Eu adaptei códigos a minha maneira para deixá-lo assim. Espero que gostem é só continuar lendo...

Crie imagens de um tamanho que você saiba que vai caber certinho. Vou deixar alguns exemplos de tamanho : 300 de altura e 300 de largura, 300 de largura e 240 de altura.

Crie uma imagem normal e outra hover como no exemplo: Vá criando as imagens do que tiver no seu menu como : Fotografia , looks... Seja lá o que for. Mas para cada uma é preciso a imagem normal e a imagem em hover.

IMAGEM NORMAL

IMAGEM HOVER.

Agora vá em Layout - Adicionar um gadget - HTML / JavaScript.

Agora cole esse código e faça as seguintes 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>

Em cada parte em negrito você irá apagar e colocar o link que pede. Repita este código e faça as alterações de cada imagem. Não esqueça de mover o gadget para perto do cabeçalho.

Onde estar Link do seu blog : Condiz com o link da página do menu . Exemplo: Se for a imagem com FOTOGRAFIA o link será desse menu, onde está todas as coisas de fotografia do seu blog.

Repita a imagem normal duas vezes e só por último a imagem em hover.

Obs: Exemplo de código para menu de mais que uma imagem como esse :

Exemplo:

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>