Tutorial: Menu com Imagem em Hover


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

Nenhum coment√°rio

Postar um coment√°rio

Mande seu coment√°rio, criticas, elogios ou sugest√Ķes.
Responderei o mais rápido possível.
Um forte abraço.