terça-feira, 27 de março de 2012

Menu Hover

tumblr_le6macmxSk1qad2wmo1_500_large

Oii minhas batatinhas rufles, como vão,antes de começar com o post, queria pedir desculpas, eu mudei de Layout e não me lembro de todos os afiliados, então se você é uma afiliada do blog, pode falar comigo neste post. Eu nunca tinha postado aqui um tutorial de um menu, nem aqueles que todo mundo usa, mais agora vou ensinar a vocês, fica lindo o resultado e fica pronto com um código, leva uns 10 minutinhos, mais Jessie 10 minutos não é muito ? não é não pois você terá que fazer as imagens e hospeda-las, vamos lá aprender a fazer ? O menu ficará assim

 
O código o menu é esse:

<a href="Coloque o URL da primera página aqui"><img src="Coloque o URL da imagem 1 aqui" onmouseout="this.src='Coloque o URL da imagem 1 aqui';" onmouseover="this.src='Coloque o URL da imagem quando passa o mouse 1';" /></a>

<a href="Coloque o URL da segunda página aqui"><img src="Coloque o URL da imagem 2 aqui" onmouseout="this.src='Coloque o URL da imagem 2 aqui';" onmouseover="this.src='Coloque o URL da imagem quando passa o mouse 2';" /></a>

<a href="Coloque o URL da terceria página aqui"><img src="Coloque o URL da imagem 3 aqui" onmouseout="this.src='Coloque o URL da imagem 3 aqui';" onmouseover="this.src='Coloque o URL da imagem quando passa o mouse 3';" /></a>

<a href="Coloque o URL da quarta página aqui"><img src="Coloque o URL da imagem 4 aqui" onmouseout="this.src='Coloque o URL da imagem 4 aqui';" onmouseover="this.src='Coloque o URL da imagem quando passa o mouse 4';" /></a>

Vá em Design Elementos da página e clique em “Adicionar um gadget” copie o código citado a cima e coloque o URL das páginas no lugar indicado e o URL das imagens de cada página, depois é só salvar e se estiver tudo Ok, salve !.

O código eu peguei no Other Things Attitude Included, mais modifiquei um pouco.Até o próximo post

13 comentários:

  1. adorei o tutorial , guardei os códigos e pretendo usá-los bjs http://www.derrepenteteen.com/

    ResponderExcluir
  2. esse menu hover é mt lindo
    >.<
    esse efeito é muito massa!

    http://blogportalteen.blogspot.com

    ResponderExcluir
  3. Que lindooo! Vou usar no meu próximo layout! hihi beijos!
    http://worldlivegirls.blogspot.com.br/

    ResponderExcluir
  4. esse menu é super lindooo *O* talves eu use no proximo layout do gn (:

    http://garotoonerd.blogspot.com

    ResponderExcluir
  5. Que tudo flor Adorei o tutorial !!
    E fica muito lindo o resultado !!

    http://souzadiinha.blogspot.com.br/
    Beijoos :)

    ResponderExcluir
  6. Que lindo, tudo muito bem explicado, assim que eu fizer o proximo lay, vou por esse no meu, é perfeito!

    Beijos; @Raah_Castroo
    www.vidaadegarotaa-vdg.blogspot.com.br

    ResponderExcluir
  7. Adorei o tutorial, bem legal, bem lindo o menu. Adorei aqui, seguindo.

    http://iasmincruz.blogspot.com/

    ResponderExcluir
  8. Adoro blog com essas dicas que ajudam principalmente os inciantes, super incentivo! Vou voltar sempre, o blog está perfeito. *-*



    http://fugindodarotina.com/

    ResponderExcluir
  9. queria te perguntar uma coisa, tu sabe onde tem um tutorial ensinando o menu to tipo do blog trechy teen ?

    http://garotoonerd.blogspot.com.br - post novo

    ResponderExcluir
  10. ótimo tutorial! Acho bem legal esses menus (:
    Beijos!
    http://diamontlilac-news.blogspot.com.br

    ResponderExcluir
  11. Gostei do tutorial,vou fazer no próximo layout do meu blog.
    http://i-teenbr.net.tc

    ResponderExcluir
  12. Amei estava atras desse menu feito louca vou usar no meu novo lay obrigada amor!

    Kisses♥
    Bruna
    (http://casinhadasnozzles.blogspot.com.br/)

    ResponderExcluir
  13. obrigado vai ajudar! oisouanderson.blogspot.com

    ResponderExcluir