Image Map

14/04/2013

Links que pulam

adoro essa foto (não a montagem que eu sei que ficou simples)
 Bom dia gente! Aqui mais um tutorial que me pediram há muito tempo, mas que eu quis esperar pra postar pra que não copiassem de uma vez, hahaha.
 Enfim, é um efeito que faz os links "pularem", e que eu uso lá no Dreams Labyrinth (blog de encomendas, agora fechadas). Não sabe como é?

link antes de passar 
link depois de passar o mouse
 Abra o seu HTML (sim, o novo, não muda nada não, viu gente? Só a aparência que tá diferente, o resto é igual, não precisa de tanto desespero), clique na caixinha de códigos e tecle ctrl+F. Então procure pelo seguinte código:
]]></b:skin>
 Então copie o código a seguir EM CIMA do encontrado:
a{
 position: relative;
    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    transition: all 200ms ease; }
 a:hover{
left: -6px;
      top: -6px;
      color: #CORDOLINK;
      text-shadow: 1px 1px #CORUM, 2px 2px #CORDOIS, 3px 3px #CORUM, 4px 4px #CORDOIS, 5px 5px #CORUM, 6px 6px #CORDOIS;} 
 Aí é só mudar o código "#CORDOLINK" pela cor que você quer a fonte do link quando passa o mouse, e "#CORUM" e "#CORDOIS" pelas cores que você quer na sombra que vai aparecer quando o seu link "pular". Prontinho, só salvar! E pode adicionar isso em outras partes também, se você trocar (por exemplo) o a { por h2 { esse efeito vai ficar nos títulos dos seus gadgets (só que tem que colocar também no lugar de "a:hover").
 Enfim, espero que tenham gostado! E quero ver a senhorita Mille usando, ein? Pediu tem que colocar no blog! ahsuahsuhaus. Não se esqueçam de creditar ;)

52 comentários:

  1. O tutorial é muito bom, mais eu não vou usar, pois o lay já está terminado...
    Só ficou um pouco ruim de ler com a letra cursiva...
    Kissus #May-Sun

    Nosso Diário Nada Convencional

    ResponderExcluir
  2. Nunca tinha visto esse haha achei muito legal
    Beijos linda.
    Cupcakeof chocolate.blogspot.com

    ResponderExcluir
  3. Sempre amei esse link, minha mentora *-*
    Lindo!
    Beijos <3 <3
    aliredcarpet.blogspot.com

    ResponderExcluir
    Respostas
    1. Aaaah, Let, tem como ajudar a divulgar, pliese?
      Preciso meeeeeeeeeeeesmo de ajuda *-*
      Beijocas!

      Excluir
    2. Ah, que bom florzinha.♥

      Excluir
  4. Ah, o efeito é tão perfeito *O* Talvez eu use no próximo lay! Talvez? Vou usar, ASHSAUH'

    -4 Seconds.

    ResponderExcluir
  5. muito bom o tutorial (*.*)

    Menina perdida- perfil

    ResponderExcluir
  6. Nossa! Fica bem legal.
    Beijo, Lili
    Princesa Teen / O blog.
    Eu no youtube / Maquiagem, dicas, DIY...

    ResponderExcluir
  7. Eu adoro esse efeito, fico sempre passando o mouse nos títulos dos posts do seu blog de encomendas, hehe xD

    Adorei o tuto, super útil. *O*

    ResponderExcluir
  8. Que engraçado, fui lá no seu blog de encomendas ontem e fiquei curioso pra saber como se faz isso. Valeu pelo tutorial, gostei =)

    NOSSO CAPRICHO
    apsmass.blogspot.com

    ResponderExcluir
  9. Bom dia *-* que divertido! confesso que tive dificuldade para ler o post, a letra super pequenininha e a cor clara :(
    Bom fds, fique com Deus.
    E tem novos posts em:
    http://maybe-i-smiled.blogspot.com.br/
    http://dicionario-feminino.blogspot.com.br/

    ResponderExcluir
  10. Perfeito o tutorial gostei demais :D

    Menina Fashion - Perfil
    Beeijinhos de Mel <3

    ResponderExcluir
  11. Esse tutorial é muuito lindo, adooooro <3
    - http://caramelises.blogspot.com.br/ // Beijos!

    ResponderExcluir
  12. É lindo esse efeito! Nem sabia que você tinha um blog de encomendas... ¬¬'
    Sem querer incomodar, essa letra cursiva atrapalhou um pouco... :c
    Bjo, Sel ;*

    Jovens Gordinhas
    Unicórnio com Bigode
    Nerd Descolada

    ResponderExcluir
  13. Pc adorei o tutorial ta divo fofa você simplesmente arrasa nos htmls sabe estou sentindo muito a sua falta no meu cantinho esqueceu da gente ? beijos estou te aguardando.



    www.levigustavodicas.com

    ResponderExcluir
  14. Adorei o tutorial, só não vou usar pq já terminei meu lay!! Achei um pouco dificil de ler com a letra cursiva e nessa cor :-\ Bjss

    Voltei com o meu blog, dá uma passadinha lá e deixa sua opinião sobre como ficou?
    Antigo Vic Barbosa, agora V de Vic!
    http://vdevic.blogspot.com.br/

    ResponderExcluir
  15. legal o post, segui meu bloG?
    http://adolescentes-cliches1.blogspot.com.br/

    ResponderExcluir
  16. Ficaa bem lindo, mas não consegui ler a letra cursiva Paulinda :( Beijãuum
    ilovecantores.blogspot.com

    ResponderExcluir
  17. Nossa é muito lindo esse efeito , ontem mesmo tava na no DL e me apaixonei por isso rs .
    Mas Paula muda a letra fazendo favor , também não consegui entender :(
    Beijos
    meninachicmc.blogspot.com

    ResponderExcluir
  18. Bem legal o tutorial *----* Gostei =D
    fashion em cores -.com

    ResponderExcluir
  19. gente fica bem legal viu :)

    ResponderExcluir
  20. Ótimo tutorial ! Parece que o resultado fica bem legal *oo* XOXO
    fairiesdancing (.blogspot.com)

    ResponderExcluir
  21. Gosto muito do tutorial de vocês, é tudo super útil ^^
    gostei muito *O*

    garotapassageira.blogspot.com.br

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

    ResponderExcluir
    Respostas
    1. Amei o tuto Paulinha, só que no meu HTML novo, não aparece a tag "]]>" dai não consigo concluir nada. :(

      Bjbj da Mandy :*
      jemiabs.blogspot.com

      Excluir
    2. Bom que gostou Mandy.♥

      Excluir
  23. Adorei o tutorial, nem sabia que existia esse efeito
    beijos

    ResponderExcluir
  24. Olha que demais, adorei!! mas nada da certo la no wordpress :(

    Tem sorteio de uma peça Galaxy Print da Sheinside no meu blog! :)
    xx
    Tali
    nuasecruasblog.wordpress.com

    ResponderExcluir
  25. Muito bom o tutorial, nem sabia que existia u.u

    ResponderExcluir
  26. Metade do post ficou com uma fonte estranha e difícil de ler e.e mas eu amo esse link <3

    ResponderExcluir
  27. Eu amei essa ideia, estou criando um novo blog e ficou ótimo para colocar esse efeito nos títulos das postagens!
    Muito obrigado!!
    Beijos (:

    ResponderExcluir