Menu em imagem com estado hover

6 de dez. de 2011


Hoje eu ia postar pra vocês um Big tutorial de como montar um template teen mas acho que com pressa não ia sair muito bom, então pensei, por que não trazer o código do meu menu que algumas pessoas pediram? E é isso que vim trazer hoje. Quando fiz o meu menu, se não me engano usei como base um código que vi lá no Trashy Girl. Esse menu é muito bom - e fácil - de usar, e a graça dele está no estado hover, que nada mais é que a mudança da imagem (texto ou link em outros casos) ao passar o mouse. Você pode usar esse código pra outras coisas também, não apenas para fazer um menu.

Abaixo segue um exemplo de como ele fica. Passe o mouse para visualizar o efeito.



Clique em leia mais para ler o tutorial.

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>

  • 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> respectivamente.
Fiz algumas imagens correndo mas vocês podem fazer as imagens de vocês, mas é importante que todas tenham a mesma altura e que a posição das letras fique o mais semelhante possível.

Imagem normal                Imagem hover 


E pode usar de divisória essa aqui: 

E então gostaram? O que mais vocês querem ver por aqui? 
Beijos, fiquem bem. 

82 comentários:

  1. Amei o tutorial!!
    Vou usar esse menu no próximo design!
    Bjs

    http://magicmih.blogspot.com/

    ResponderExcluir
  2. Muito bom ja estou usando :)

    ResponderExcluir
  3. Fica lindo o efeito, e sinceramente, eu posso usar! ^^

    http://meublogblogdadanii.blogspot.com/

    ResponderExcluir
  4. Amei, vou usar no próximo lay! *-* primeira vez no seu blog e amei, seguindo :D se quiser dar um pulinho no meu, só clicar no 'conspirantes' ali ;
    Beeijos

    Conspirantes

    ResponderExcluir
  5. Esse blog ajuda deeeemais!! *-*
    estou seguindo aqui certeza! beijos
    http://perfeitateen.blogspot.com/

    ResponderExcluir
  6. oioiii!!
    tudo bem??? estou te seguiiindo aamei seu blog <3
    bjiiinhos,
    claro se gostar do meu blog, siga-o
    Nélida (Adorável Neura)
    http://adoravelneura.blogspot.com/

    ResponderExcluir
  7. Faz tempo que eu procurava um tutorial assim, e nunca achava um que eu conseguisse fazer funcionar! :b
    Amei e vou usar nos meus próximos layouts! é bem diferente, a gente não vê um assim sempre!
    Adorei! Segue de volta? www.happy-charllote.blogspot.com
    Agora fiquei ansiosa para ver o big tutorial! Bjs, Lala

    ResponderExcluir
  8. Legal mais eu já sabia *-*
    Bjs Dry
    SweetCandyuUp.blogspot.com

    ResponderExcluir
  9. Tipo: Eu suuuuuuuuuuuuper amei esse tutorial... Tava a procura mesmo! OBG, OBG, OBG!

    Bjus de sua afiliada!

    http://attitude-feminina.blogspot.com

    ResponderExcluir
  10. Muito legal o tuto!
    Eu adoro o blog, sempre com ótimos posts ^^

    @wendyelmb
    http://tecido-doce.blogspot.com/
    http://cerejadeneve.wordpress.com/

    ResponderExcluir
  11. Amei o tutorial, acho que vou usar lá no blog!!!
    Tem post novo lá no Rosa Chiclete>>Comenta?

    Bjs, Rafaela!

    ResponderExcluir
  12. Gostei muito do tutorial, são lindos .
    Você aceita parceria amor ?
    Avisa lá no blog.

    Beijos, Juliana.
    http://bloggirlpop.blogspot.com/

    ResponderExcluir
  13. Que lindo! Vou usar ele em breve (:

    Seguindo, http://viverserfeliz-renata.blogspot.com/

    ResponderExcluir
  14. VLW a dica!Muito boa Anne,
    http://blog-da-byaa.blogspot.com

    ResponderExcluir
  15. adoreiiii o tuto me ajudou muito !!!!!
    seguindo aquiii !!!
    segue de volta ??

    oficialmente o Louca Atitude esta fazendo seu 1º concurso para ajudar aos blogs que são leitores daqui e pros que ainda não são o nome do concurso será "atitude up”. ficaremos muito felizes se o seu blog participa-se entao passa la ???
    http://louca-atitude.blogspot.com/2011/12/concurso-atitude-up.html#comment-form

    obrigada !!!

    ResponderExcluir
  16. Muito legal esse efeito...
    Bom,eu achei o seu blog super fofo,cores bem básicas muito lindo
    Eu ficaria muito feliz em ser a sua parceira
    Se você aceitar comenta lá no meu blog e siga ele
    Bjjs

    fantasiamenina.blogspot.com

    ResponderExcluir
  17. Oi, Amei seu blog e adorei o tutorial.
    Virei seguidora do seu blog!!!

    Segue???

    http://mundo-da-isabella.blogspot.com/

    ResponderExcluir
  18. MUITO legal esse efeito, e o seu tutorial, muito bem explicado (como sempre). Vou usar com certeza no meu próximo layout!

    Bjs
    makes-da-julia.blogspot.com

    ResponderExcluir
  19. Já conhecia o efeito mas o tuto tá super bem explicado *_* Lindas as imagens que vc colocou.

    Que bom que gostou da revista flor! kissus
    www.bombadecereja.tk

    ResponderExcluir
  20. Oii!Amei aqui.Seguindo.Retribui?
    bonequinhadeporcelana.tk

    ResponderExcluir
  21. Adorei o tutorial, ficou lindo!
    www.blogpinklollipop.blogspot.com

    ResponderExcluir
  22. Oi flor,você perguntou qual tutorial eu usei para colocar o nome do autor debaixo do post,e foi o seu mesmo,eu fiz várias vezes até que deu certo.Também olhei o site de onde você pegou e vi que estava bem parecido...Acho que era o meu modelo que não estava aceitando...Era só isso ne? Beijos... www.meninacute-s2.blogspot.com

    ResponderExcluir
  23. Oi Anny e muito obrigado por me avisar que o blog está me plagiando, eu sei que ela é nova . Mais então porque que ela postou uma postagem(mais verdadeiramente Plagiou) essa postagem sobre "Plágio" aff que raiva.
    Mais uma vez obrigado :)

    ResponderExcluir
  24. Estava procurando esse tuto a uma vida haha *-* ou usar no proximo lay hihi,
    sim linda, respondendo suas perguntas, é direcionado sim hihi, o meu por exemplo, era devaneiosdeuma-garota.blogspot.com copia e cola ai pra vc ver como é rapidinho hihi
    o pagamento é anual sim, tipo acredito que n se escolha a data por que é a duração de um ano, então o pagamento será pela epoca que criou o dominio, se n pagar eles devem retirar o dominio, mas n sei nada ao certo...
    o preço achei ótimo, mudei peo uol host e foi facil e rapidinho hihi, enfim, beijos, qualquer duvida é só dizer *-*

    ResponderExcluir
  25. Owntyy adorei isso *-*
    Sabe,há um tempinho atrás eu tava feito louco atrás desse efeito,sério mesmo. Fucei tudo e não encontrava,tentei fazer isso com o mapemento,mas não deu muito certo,é muito complicado -_-'
    Mas eu adorei esse tuto,muito legal mesmo 8D

    Ah,poderia ensinar a como dixar a data como a sua? *-*
    Eu tabém estava a procura disso,e não encontrei :/

    Até mais ^^

    ResponderExcluir
  26. Muito bom
    Gostaria que conhecesse meu blog,visita e segue se gostar
    adolescenciadecristal.blogspot.com

    ResponderExcluir
  27. eu nunca consigo fazer tutoriais de menus :( Bom, eu estou te seguindo, amora. Desculpa a pergunta, mas você poderia fazer um tutorial ensinando como vc fez pra ficar o seu "Postado por Anni S. | Tags: goodies, seu blog, tutoriais |" ficar desse jeito? Obrigada :) Beijinhos!
    http://blog-themoustache.blogspot.com/

    ResponderExcluir
  28. tem selinho pra você lá no meu blog.
    tava procurando esse tutorial, vou usar ele no meu próximo layout.

    Beijos'
    pensamentodeumagarotathegirl.blogspot.com/

    ResponderExcluir
  29. Oi :) Estamos sempre aqui no Go Imagine, amo seus posts s2 Eu uso esse menu, dá um charme a mais rs.
    Flor, eu postei um tutorial daqui, mas dei os créditos tem problema?
    Beijos,
    www.theattitudeincluded.blogspot.com
    www.tutoriaisattitudeincluded.blogspot.com
    www.cuteattitudeincluded.blogspot.com

    ResponderExcluir
  30. Amei este tutorial flor ,estou em duvida em usar este menu,e usar o mapeado mesmo,mas depois eu decido:)conheci teu blog hoje pelo menina de Deus e amei,já estou seguindo,poderia visitar o meu,e se gostar seguir e comentar também ? claro só se gostar :)
    beijinhos
    meninasteens2.blogspot.com/

    ResponderExcluir
  31. Você explica muito bem e eu amei o blog <3.
    Estou seguindo. *-*
    Beijos, webcalcinha.blogspot.com

    ResponderExcluir
  32. ain que perfeito, adorei, estou usando no meu blog, estava mesmo à procura disso.
    Acabei de conhecer aqui e adorei, estou seguindo, de fato.
    Voltarei mais vezes.
    Abraços,
    TDiaryofteens.blogspot.com

    ResponderExcluir
  33. Obaaa! Big tutorial ensinando a fazer lay! Adoro isso *-* Tanto quanto brushes (inclusive os + recentes que vc postou, adorei de paixão)!
    Aqui é muito lindo! Antes eu visitava até, mas meu blog tava no começo, então eu não queria deixar o link. uahsuah
    Enfim, adoro aqui. Menina, nunca mude esse layout. É o mais perfeito de toda a blogosfera, é sério. Me apaixonei pelo conteúdo também, e pelos seus olhos. Que perfeição!
    De qualquer forma, um dia espero que meu blog chegue aos pés do seu ^^
    Seguindo!

    ResponderExcluir
  34. Opa! Na verdade eu já seguia :D

    ResponderExcluir
  35. Amei seu blog! Esse tutorial será muito útil para mim agora que estou criando um layout para usar no meu blog no ano novo, quando colocar esse novo lay lá vou te avisar e colocar os créditos para seu blog. Muito obrigada, já estou te seguindo.
    Se depois quiser conhecer meu blog também, aqui está o link:
    http://rafadeoliveira-tudosobrequalquercoisa.blogspot.com/

    ResponderExcluir
  36. Oi flor, gostei desse efeito acho que vou usar lá no blog. Seu blog lindo e super interessante!!! Espero que tenha um tempo e possa passar no meu, não se assuste, pois o inalguramos hoje, então só tem um post! Já estou seguindo aqui.

    http://blog-worldteen-blog.blogspot.com/

    ResponderExcluir
  37. Legal o tutooo
    Adorei!!
    Beijinho fica com Deus
    Xau Xau!!
    http://karenbarbiepink.blogspot.com

    ResponderExcluir
  38. Amei de+ seu blog!Estou seguindo!
    Bjs!

    www.larissamerlo.blogspot.com

    ResponderExcluir
  39. Usei o tutorial e dei os créditos na página "extras"...Bjs!

    www.larissamerlo.blogspot.com

    ResponderExcluir
  40. Anny, com certeza gostei das suas dicas lá no Atitude Feminina, vou fazer o possível pra segui-las !

    bjus,

    atitudefeminina.tk

    ResponderExcluir
  41. Perfeito, adoro tutoriais ^^

    http://out-of-orbit.blogspot.com/

    ResponderExcluir
  42. Liinda , queria encomendar um lay pro meu blog ! Lindo demais aquii mtmtmtmt perfeito !
    Faz um lay pra mim linda ?
    http://luxo-ao-cubo.blogspot.com/

    ResponderExcluir
  43. mais elas não ficam do lado ficam em baixo uma da outra como faço pra colocar do lado, me responda lá no meu blog ? :(
    iwantonlyou.blogspot.com

    ResponderExcluir
  44. Como faz para ficar na horizontal, igual ao seu?

    http://noticiascec007.blogspot.com/

    ResponderExcluir
  45. Este comentário foi removido pelo autor.

    ResponderExcluir
  46. Adorei o tutorial, me ajudou bastante!

    ResponderExcluir
  47. Oi amei o blog
    Postei o tutorial no meu blog se voç não se importa .

    Coloquei os créditos
    www.crazyinhtml.blogspot.com
    amei seu blog muito lindo

    ResponderExcluir
  48. amei seu blog =)
    coloquei seu link lá no meu ok flor...
    uma ótima quinta bjs!

    ResponderExcluir
  49. Anny, as minhas imagens estão uma embaixo da outra: o que eu faço?
    Beijos, amo o seu blog,
    Ana Lola

    http://s2spink.blogspot.com
    Com um novo layout!

    ResponderExcluir
  50. Demorei mais consegui! rsrs
    laura5mais.tk

    ResponderExcluir
  51. Eu não consegui!! Pq eu não entendi o que é "link da página". Alguém me ajude por favor !!

    ResponderExcluir
  52. Amei aqui e amei o tutorial. Usei as primeiras imagens ok? Bjs

    garota-unbroken.blogspot.com

    ResponderExcluir
  53. Amei o Tutorial Visitem me blog ele é novo http://garotasweetblog.blogspot.com/

    ResponderExcluir
  54. adorei a dica, vou usar no próximo layout do meu blog!

    http://omg-girls.blogspot.com

    ResponderExcluir
  55. BOM EU FIZ FICOU LEGAL, MAIS NÃO SEI CRIAR MUITAS PAGINAS, IREI TER QUE DISCUTIR ISSO COM MINHA DESIGNE

    ResponderExcluir
  56. Oi Anny, adorei o blog!
    Me ajuda?? Como eu ponho a barrinha??
    Beijinho Luli
    drashous.tk

    ResponderExcluir
  57. Oi Alana Stankiewicz . Tudo Beem ? eu criei um blog graças aos turias do go imagine queria agradecer ok ? pelos belos e ajudativos turais
    eu amo muito voce mesmo sem conchecer Alana Stankiewicz


    Kisses


    Meu Blog Aqui: http://cookiecupcake-off.blogspot.com.br/
    Meu nome e Any Sorry

    ResponderExcluir
  58. aah que lindo! - vi esse tuto aqui no seu blog ah tempos! ... E esses dias lembrei dele, e usei ele no meu layout!

    Não costumo usar ele nos menus, uso mais nas fotos da sidebar - mais em qualquer lugar que coloque, fica demais...

    http://japenseidemais.blogspot.com.br/

    ResponderExcluir
  59. Heey , não consegui :( , eu coloquei, salvei e quando fui ver,, ele sumiu sozinho :(

    ResponderExcluir
  60. Muito útil, mas Anny será que você poderia passar o código da área dos comentários iguais os seus?
    http://entreamigas-thamy.blogspot.com.br/ (se gostar siga.)

    ResponderExcluir
  61. Anny, eu fiz, mas ele não funciona.

    Ele some sozinho :(

    ResponderExcluir
  62. Alana... te adoro!!! Salvou minha vida, obrigada mesmo *--*!

    ResponderExcluir
  63. simplesmente ameeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeiii <3 http://we-liike.blogspot.com/

    ResponderExcluir
  64. oi anny, como eu faço pra deixar as imagens uma do lado da outra pra poder colocar em baixo do cabeçalho???
    http://sorrisomet4lico.blogspot.com.br/

    ResponderExcluir
  65. Ameei!! simplesmente ameei! tava procurando esse tutorial a mto tempo.. obrigada *u*

    ResponderExcluir
  66. seu blog é muito lindo meus parabéns... mas que gostaria de saber se vc tem algum tutorial ensinando a fazer template
    beijinnhos!

    ResponderExcluir
  67. Nossa ficou lindo no meu blog ><
    E super simples !
    ameeei

    mm-garotaoriginal.blogspot.com

    ResponderExcluir
  68. Estou usando o 2 menu preciso credita-lo ?

    ResponderExcluir
  69. Oiie ameii,deu tudo certo,mas como fazer pra ficar um do ladinho do outro?
    aqui fica um debaixo do outro!

    ResponderExcluir
  70. Alias deixe,kkkk,conseguii!
    Eu fui em editar HTML, daí coloquei lado a lado!
    obrigado

    ResponderExcluir
  71. olá amei seu blog suas dicas eu só iniciante na blogosfera,e crei meu layout,aparti das suas dicas amei muito obrigada .


    http://mybookandgirl.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. gente esse meu blog eu perdi agora é esse http://apenasdoze.blogspot.com.br/

      Excluir
  72. Amei muito esse tutorial estou pensando em usar no próximo layout do meu blog beijos

    http://apenasdoze.blogspot.com.br/

    ResponderExcluir
  73. Adoooorei !! Estou usando ,
    Obrigadaaah <3
    http://cupcake-de-chocolatee.blogspot.com.br/

    ResponderExcluir
  74. lINDO ESTOU USANDO ;*

    http://mundofashionbyrebecca.blogspot.com.br/

    ResponderExcluir
  75. Eu consegui \o/ (a alegria é tanta porque eu não sei mexer nesses códigos e sai td errado rsrs e quando eu acerto eu solto foguete kkk)
    Uma pergunta: como-onde- você faz essa imagem pq eu estou tentando fazer no photoshop e no corel e fica desfocado :/

    obrigadinha

    Pense.Repense

    ResponderExcluir
  76. Adorei! Vou usar por um tempo! ^.^

    ResponderExcluir

- Comentários do tipo "seguindo, segue de volta" "lindo o blog, seguindo, retribui?" Serão ignorados se não tiverem uma opinião sobre o post em si.
- Não aceitamos mais selinhos e tags, sorry!
- Leia a página "FAQ" e outras páginas internas antes de perguntar qualquer coisa.
- Sua opinião é sempre bem vinda. Mas seja educado!

© Go Imagine - 2014. Todos os direitos reservados.