março 01, 2012

Tutorial - Menu com imagens efeito evelyn's place

Tumblr_lp0jy4difh1qg6dyso1_500_large
Oi meus raios de sol :} hoje vim com um tutorial inventado por mim kkk, tinha recebido alguns pedidos de como fazer um menu como o do blog Evelyn's Place, eu sinceramente não sei, mas como foi muito pedido resolvi fazer da minha maneira e o efeito fica exatamente igual, talvez seja até assim que se faz (vai saber né kk) Então vamos usar o mesmo efeito desta postagem aqui.


Para quem não sabe de qual menu estou falando tem uma foto abaixo:
(clique para ampliar)

Veja como ficou o menu que eu fiz: Passe o mouse sobre a imagem para visualizar.




Usa-se o código que é o mesmo da outra postagem,este que está
dentro da caixinha, copie e coloque o url de cada imagem em seu devido lugar:

Lembrando:
1. Adicione um gadget de HTML/JavaScript e cole o código.
2. Deve alterar o LINK DO SEU BLOG, pelo link da pagina que você quiser.
3. Copie o url da 2º imagem e depois o url da 1º imagem e cole no lugar indicado

Exemplo:
Primeira imagem        Segunda imagem

É bom saber:
* As imagens devem ter a mesma largura.
* A altura você que decide.
* Pode ser com as pontas arredondada ou quadrada como preferir.

Pode usar os exemplos como modelo, salve e mude a cor :} e depois é só escrever o nome.

25 comentários:

  1. Amei amei amei amei! Eu tava procurando um tutorial que explicasse isso mas nunca encontrava, eu acho muito lindinho esse menu! Te amoooo, valeeeu ♥ Bjoks!

    ResponderExcluir
  2. OMG!!!!! Salvou minha vida, sério! Adorei o tutorial viu? Sua gatona♥
    www.viverserfeliz-renata.blogspot.com

    ResponderExcluir
  3. Manu: Que fofa ^^ também te amo flor *0* (ç.ç vou chorar) kk

    ResponderExcluir
  4. É super fácil, e fica muuito lindo o efeito Karol *-*

    Beijos! world-cutest.tk

    ResponderExcluir
  5. Flor, eu não sei como e agradecer, estava procurando por esse tudo pro novo lay *o*, omg. Obrigada, e obrigada e obrigada um bilhão de vezes por me ajudar ♥ Beijos ^^
    garotasensivelblog.blogspot.com

    ResponderExcluir
  6. Quando amor *0* kkk'
    fiquei feliz que gostaram, muito feliz!

    ResponderExcluir
  7. Eu faria só uma imagem usando a propriedade background-position :)

    Flor muito legal aqui, amei o cupcake ;)

    bjãoo

    ResponderExcluir
  8. deu ate gosto de mudar o template do meu blog, vou te dar um milhão, como vc descobriu isso?

    ResponderExcluir
  9. aai que lindo o efeito do menu *-*
    adorey!

    Beeijos
    http://blogportalteen.blogspot.com

    ResponderExcluir
  10. Ótimo! Eu acho que para por, é só por o código em cima da imagem do cabeçalho. Se não me engano, a Débora Morais já ensinou a fazer isso!
    pinkpimenta.tk

    ResponderExcluir
  11. Oii, tudo bom??
    Aceita parceria??
    Posso te pedir um favor??
    Beijoo!

    Likeaamericangirl.blogspot.com

    ResponderExcluir
  12. Com certeza eu usarei esse menu no meu próximo layout. Fazia tempo que queria saber como se faz um menu desses. Amei o tutorial. Bjo.

    http://miasodre.blogspot.com/

    ResponderExcluir
  13. Oi, vim avisar que tá tendo uma super PROMOÇÃO lá no meu blog, são vários prêmios, incluindo um Perfume Christina Aguilera.

    participa: http://kli-che.blogspot.com/2012/03/promocao-kliche-2.html

    ResponderExcluir
  14. Ahhh eu queria mesmo aprender como fazer isso *o*
    http://cantoseencantosdahellen.blogspot.com/

    ResponderExcluir
  15. O blog está mt lindo flor, amei !
    http://innocenceteen.blogspot.com/

    ResponderExcluir
  16. Adorei esse efeito. Karol, por favor me passa o link de alguns blogs de encomendas. Estou montando um lay novo, mas eu sou péssima para fazer cabeçalhos :s
    Mil Beijos
    refugio-teen.blogspot.com

    ResponderExcluir
  17. Vou fazer la no blog! o menu ta meio feinho!♥ Otimo tutu!
    http://kelly-club.blogspot.com/

    ResponderExcluir
  18. Você pode postar um tutorial de como criar seu próprio?Pra combinar mais com o lay de cada pessoa.

    Bezos ^^

    Lufashionteen.blogspot.com

    ResponderExcluir
  19. Luiza: Lu, é só salvar a imagem que esta em branco e mudar a cor e escrever o que quiser flor.

    ResponderExcluir
  20. ai que legal, vou tentar fazer... lindona... coloca uma caixinha pra eu assinar a news letter, pleasee...

    ResponderExcluir
  21. Muito legal, amei.... consegui fazer td, mas os nomes ficaram abaixo e não um do lado do outro, me ajuda?
    Bj
    Luh
    www.sempre-belas.blogspot.com

    ResponderExcluir
  22. Caroline Soares presciso de um favor rs se vc poderia editar meu blog pois minha net não está deixando ele fica pedindo sempre em um quandro amarelo para fazer login dnv ou se n fechar poderia m ajudar pff add ai iagomice@hotmail.com o meu blog é poemasepensamentosdegaroto.blogspot.com pfff vc irá me ajudar muito vlw e continui assim com seu blog ele ta super foda

    ResponderExcluir
  23. Tem como colocar esse código direto no HTML? E se sim aonde?

    Conversas de Alcova

    ResponderExcluir
    Respostas
    1. Oi linda, que eu saiba não tem como, mas vou pesquisar e se encontrar te aviso ok? Beijus volte sempre

      Excluir