6 de mar de 2014

Menu em imagem com hover

Olá pessoal, trouxe um tutorial que me foi pedido na ask.
Sabe aqueles blogs que tem o menu em imagens? É esse que vou ensinar e
é super fácil colocar no blog.


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

<center><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></center>


Ficando assim:

<center><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><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><center><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></center>

Repita quantas vezes quiser.

-Onde pede "link do seu blog" troque pelo link da página que você desejar.
-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.
-Já em "URL da imagem no estado hover" coloque a imagem que você quer que apareça ao passar o mouse.
-Se você não quiser o menu centralizado é só retirar as tags do começo e do fim, <center> e </center> 

4 comentários :

  1. Você sabe como usar um layout de tumblr no blogger?? queria saber :/

    ResponderExcluir
    Respostas
    1. Anônimo tem vários blogs que disponibilizam layout estilo tumblr
      para a plataforma blogger. Verifique no link abaixo:

      Layout estilo tumblr para blogger

      Excluir
  2. fiz varias, como faço pra ficarem um do lado da outra? está uma em baixo da outra.. que código coloco entre elas? agradeço desde já! beijos!

    ResponderExcluir
    Respostas
    1. Bia, depende onde vc colocou, se na sidebar vai depender do tamanho da imagem,
      podendo ficar duas, três na mesma linha.
      Coloque o código um ao lado do outro e quando terminar coloque /center.
      Vou fazer na postagem.

      Excluir

Qualquer dúvida pergunte que
responderei com prazer.
Só peço que seu comentário
seja relacionado à postagem.

© Princess Tutoriais- Agradece sua visita
2014. Todos os direitos reservados
Pedidos? dúvidas? nos comentários ou na Ask.
imagem-logo