07 dezembro 2011

Menu com efeito hover igual o do blog

||
Tumblr_ljv5ia2aki1qf8em3o1_500_large_large
Créditos da imagem: http://weheartit.com/entry/18905804


Em apenas 3 dias com esse layout já recebi muitas perguntas de como fiz esse menu, que uso no blog, então resolví fazer um tutorial ensinando-o, primeiramente só aconselho fazer esse tutorial quem tem pasciência para criar e hospedar imagens, além disso pessoas que não se embaralhem com elas, dica : coloque o nome nelas como: home 1 e home 2 que fica mais fácil depois pra entender.Também queria falar que eu aprendi esse código no tuoriais attitude included, mais vou fazer o tutorial com as minhas palavras, esse é o menu que vamos aprender :


1) Vá em design no seu painel do blogger e depois em adicionar gadget
2) escolha o gadget HTML/Javascript e cole o seguinte código:
<img onmouseout="this.src='Imagem normal sem passar o mouse1';" onmouseover="this.src='imagem normal sem passar o mouse1';" src="imagem quando o mouse passa1" /></a>
<img onmouseout="this.src='Imagem normal sem passar o mouse2';" onmouseover="this.src='imagem normal sem passar o mouse2';" src="imagem quando o mouse passa2" /></a>
<img onmouseout="this.src='Imagem normal sem passar o mouse3';" onmouseover="this.src='imagem normal sem passar o mouse3';" src="imagem quando o mouse passa3" /></a>
Se quiser mais de 3 categorias copie e cole o código mais de uma vez. Ali você substitui pela url da imagem que quer quando o mouse não estiver na imagem , e pela url de quando o mouse passa pelo menu

3)Para por os links clique em 'formato rich text', você verá as imagem, selecione uma por uma e clique em 'criar links' depois de colocar o link nas imagens, volte ao editar html do gadget, salve e pronto.
É isso nenéns, ah, eu já fiz minha árvore de natal com a minha mãe, logo vou mostrar a minha e dar dicas para vocês, além disso também quero botar minha lista de natal aqui no blog e tal beijinhos luh

15 comentários:

  1. obrigada Luh...muito bom o tutorial...beijos

    http://123make.blogspot.com/

    ResponderExcluir
  2. Gosteei do tutorial *-*
    http://perfeitateen.blogspot.com/

    ResponderExcluir
  3. Oioi, Linda!!
    Viim, fazer a visitinha de sempre, uhauah'-'
    O post de hj fooi supeer legal, taah?? :D
    bjookas
    kah santos :)
    http://fluorescentadolecent.blogspot.com/
    http://teste-bubblegumgirls.blogspot.com/

    ResponderExcluir
  4. Nossa, perai deixa eu morrer rapidinho.
    \o que blog, perfeito! Amei, amei & amei, sem dúvidas, vou vir aqui sempre!

    --Tem novo post, no Perfect Candy, comenta lá.
    http://bperfectcandy.blogspot.com/

    ResponderExcluir
  5. Adorei o tutorial!
    Eu e minhas amigas criamos um blog, vai lá e da uma força?
    http://worldccpm.blogspot.com/

    ResponderExcluir
  6. Oi, passeando pela blogosfera conheci seu blog, ele é lindo e com postagens ótimas. Estou te seguindo, e passarei sempre para comentar. Adoraria tê-la como seguidora também!

    http://barbiedanipink.blogspot.com/

    ResponderExcluir
  7. aaaaaaah depois irei fazer no meu :D

    ResponderExcluir
  8. amo esse tipo de menu, ja usei mtas vezes, amei o tuto :)
    xo.xo

    ResponderExcluir
  9. Já trocou a aparencia de novo? heheheh eu achava que era a única que descobria algo e queria logo fazer!

    Adooro a sua criatividade, parabéns pelo blog:)

    ResponderExcluir
  10. muuito bom o tuto! Quando eu aprender a mexer mais um pouquinho vou fazer ;D bggs

    http://blogportalteen.blogspot.com

    ResponderExcluir
  11. Eu sei que não tem nada haver com o post mas, eu tava lendo seu about e você ja é casada nooooossa *-* como foi? Ele que pediu? Você tem filho? E seus pais como reagiram?? Claro você não precisa responder se não quiser mas é que eu to realmente curiosa!

    ResponderExcluir
  12. Que maneiro! Sempre quis saber como faz isso, acho um efeito bem interessante, adorei o tuto!

    Ei, você pode dar uma visitinha no meu blog? http://papo-teen-mandydamas.blogspot.com/ e se quiser segue? Beijos!

    ResponderExcluir
  13. Amei o tutorial ...

    mylenaravini.blogspot.com

    ResponderExcluir
  14. Olá!
    Amei viu? Parabéns.
    Sei que algumas pessoas não gosta de "segue de volta" mas estou precisando... Por tanto:
    Segue de volta? hshs
    Aí vai: http://mundinhomagicodagaby.blogspot.com

    ResponderExcluir

- Eu respondo todos os comentários do blog, por mais que demore um pouquinho sempre respondo.
- Se você me fez alguma pergunta por comentário eu respondo no próprio post, então é só voltar no post onde perguntou que sua resposta estará lá.
- Adoro receber e-mail de leitoras, com dúvidas, elogios, sugestões e até algum desabafo como muitas fazem, acreditem não é nenhum incômodo <3
- Se quer criticar, critique de modo construtivo.
- Eu adoro quando vocês participam, afinal o blog é feito para vocês <3

Related Posts Plugin for WordPress, Blogger...