Tutorial: Menu com Imagem em Hover

01:52


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:

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!!!

Você pode gostar também

0 comentários

Mande seu comentário, criticas, elogios ou sugestões.
Responderei o mais rápido possivel.
Um forte abraço a todos vocês!

Contrate o Blog

Meu blog faz parte do Modatrade


Renata Massa
Renata Massa
Modatrade | A vitrine dos blogs de moda
Modatrade | A vitrine dos blogs de moda