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. 

85 comentários:

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

    http://magicmih.blogspot.com/

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

    http://meublogblogdadanii.blogspot.com/

    ResponderExcluir
  3. 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
  4. Esse blog ajuda deeeemais!! *-*
    estou seguindo aqui certeza! beijos
    http://perfeitateen.blogspot.com/

    ResponderExcluir
  5. 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
  6. 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
  7. Legal mais eu já sabia *-*
    Bjs Dry
    SweetCandyuUp.blogspot.com

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

    Bjus de sua afiliada!

    http://attitude-feminina.blogspot.com

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

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

    ResponderExcluir
  10. Boa tarde, tudo bem?
    Adorei o post e o conteúdo do seu blog :)
    Dá uma passadinha lá no meu cantinho e da minha amiga, acabei de postar sobre os sete resorts mais queridinhos das celebridades.
    Se gostar de lá, siga-nos.
    Também tá rolando sorteio no blog: http://tinyurl.com/bv4tx7u
    Um beijo e uma ótima quinta-feira para você!
    Thaís Santos, Equipe Love Me.

    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. Oi, seu blog é muito legal e já estou te seguindo.
    Te convido a conhecer o meu blog e se gostar me seguir também ;)
    Beijinhos
    Renata
    http://escutaessa.blogspot.com/
    @blogescutaessa

    ResponderExcluir
  33. 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
  34. 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
  35. Opa! Na verdade eu já seguia :D

    ResponderExcluir
  36. 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
  37. 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
  38. Legal o tutooo
    Adorei!!
    Beijinho fica com Deus
    Xau Xau!!
    http://karenbarbiepink.blogspot.com

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

    www.larissamerlo.blogspot.com

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

    www.larissamerlo.blogspot.com

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

    bjus,

    atitudefeminina.tk

    ResponderExcluir
  42. Perfeito, adoro tutoriais ^^

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

    ResponderExcluir
  43. 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
  44. 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
  45. Que blog liiiindo, flor, você escreve mto bem e o seu blog é d+! Bem, seguindo e gostaria que seguisse tbm! Beijos! Aceita parceria? Beijos, fofa!

    www.grimacing.blogspot.com

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

    http://noticiascec007.blogspot.com/

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

    ResponderExcluir
  48. Adorei o tutorial, me ajudou bastante!

    ResponderExcluir
  49. 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
  50. amei seu blog =)
    coloquei seu link lá no meu ok flor...
    uma ótima quinta bjs!

    ResponderExcluir
  51. 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
  52. Demorei mais consegui! rsrs
    laura5mais.tk

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

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

    garota-unbroken.blogspot.com

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

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

    http://omg-girls.blogspot.com

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

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

    ResponderExcluir
  59. 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
  60. 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
  61. Heey , não consegui :( , eu coloquei, salvei e quando fui ver,, ele sumiu sozinho :(

    ResponderExcluir
  62. 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
  63. Anny, eu fiz, mas ele não funciona.

    Ele some sozinho :(

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

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

    ResponderExcluir
  66. 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
  67. Ameei!! simplesmente ameei! tava procurando esse tutorial a mto tempo.. obrigada *u*

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

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

    mm-garotaoriginal.blogspot.com

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

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

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

    ResponderExcluir
  73. 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
  74. Amei muito esse tutorial estou pensando em usar no próximo layout do meu blog beijos

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

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

    ResponderExcluir
  76. lINDO ESTOU USANDO ;*

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

    ResponderExcluir
  77. 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
  78. 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.