Links em fade e sem sublinhado

|
Tumblr_lv12l2jkzi1qe0hneo1_500_large
Hoje vocês vão aprender como fazer esse efeito super lindo nos links, em que há uma transição suave de uma cor para outra quando se passa o mouse em cima. O efeito é esse: passe o mouse. Além disso, o código desse efeito tira aquele sublinhado que tem embaixo dos links. Antes de tudo, tenho que dar os créditos ao Extras Place Fame pelo código do efeito fade.



Vamos começar? Então vá no HTML do seu seu blog (Modelo > Editar HTML), aperte Ctrl + F e procure por: a:link { Logo abaixo vai aparecer este código:
a:link {
text-decoration:none;
color: $(link.color);
}
a:visited {
text-decoration:none;
color: $(link.visited.color);
}
a:hover {
text-decoration:underline;
color: $(link.hover.color);
}

Apague todo esse trecho e no lugar dele cole esse código:

a:link {
color: #E9A1C0; /* Cor do link*/
text-decoration: none;
-webkit-transition: color 0.7s ease-out;-moz-transition:
color 0.7s ease-out;transition: color 0.7s ease-out;
}
a:visited {
color: #33CCCC; /*Cor dos links visitados*/
text-decoration:none;
filter:alpha(opacity=100);
-moz-opacity: 1; -khtml-opacity: 1; opacity: 1;
}
a:hover {
color: #707070; /*Cor do link quando passa o mouse*/
text-decoration:none;
filter:alpha(opacity=100);
-moz-opacity: 1; -khtml-opacity: 1; opacity: 1;
}
É só substituir as cores e salvar. Mas fazendo apenas isso, o efeito não vai ser aplicado na sidebar. Se quiser que os links da sidebar fiquem assim também, é só procurar pelo código abaixo e apagar ele:

.sidebar .widget a:link {
  color: $(widget.link.color);
  text-decoration: none;
}
.sidebar .widget a:visited {
  color: $(widget.link.visited.color);
}
.sidebar .widget a:hover {
  color: $(widget.link.color);
  text-decoration: underline;
}

Não esqueça de visualizar antes de salvar para ver se está tudo certo!

Se você quiser apenas tirar o sublinhado faça o seguinte:
Procure por a:hover { e logo abaixo onde tem text-decoration:underline; mude para text-decoration:none; e pronto!

68 comentários

  1. Ah eu acho tão bonitinho esse efeito ^^

    ResponderExcluir
  2. www,garotadeallstar.tk

    ResponderExcluir
  3. Oooi flor, desculpa eu pedir de novo um tutu, mais eu ameeey, ameey e queria seber como se faz essa letra maior rosa no começo do post, poderia fazer? Kissus.
    http://garota-fashiion.blogspot.com/

    ResponderExcluir
  4. Amei a dica!!Acho que vou fazer!!O efeito é mega legal!!^^

    http://meumundomudando.blogspot.com/

    ResponderExcluir
  5. Ual adorei o tutorial eu estava mesmo procurando ele flor , obg mesmo e adorei as 10 coisinhas sobre vc , gosto tbm de mcfly e que sorte em ficar no mesmo avião que eles
    http://perfeitinha-blog.blogspot.com/

    ResponderExcluir
  6. Xou de bola! Uma coisinha: vc é fan da Avril Lavigne?? =P~~~~

    ResponderExcluir
  7. Uso esse efeito no meu. Acho limmmdo! (:
    Beeijos ;* 
    diamontlilac-news.blogspot.com

    ResponderExcluir
  8. Esse efeito é muito fofo, e dá mais charme ao blog. Super legal esse negócio de 10 coisas sobre mim, deu pra gente te conhecer melhor, Liah. Ah, e você gosta de McFly também? Puxa vida, eu amo <3 Beijos, fofa.

    Danielle, onthefame.tk

    ResponderExcluir
  9. Estava procurando esse tutorial, e funcionou no blog! Adorei ^^
    Ei, poderia ir nesse blog http://vidadegarota-dalva.blogspot.com/ e votar no Doces Sapatos de Veludo? Gostaria muito de ganhar esse concurso *-*
    Bjs.
    http://sapatosdeveludo.blogspot.com

    ResponderExcluir
  10. me ajudem com o meu blogg.
    talves nao axarei vcs novamente.
    meu msn: kpda_kamilahotmail.com
    meu blogg:
    http://coisasdamilapaes.blogspot.com/2011/11/parabens-pra-miley.html

    ResponderExcluir
  11. Olá, o TS abriu vagas para postadores(as), se te interesar...

    Trashy Splash

    ResponderExcluir
  12. Fica muito lindo mesmo o resultado, adorei usar! =)

    http://meublogblogdadanii.blogspot.com/

    ResponderExcluir
  13. Ah, adoreii desafio, muito legal, tambem AMO gatos, a unica diferença é que eu tenho 4 gatinhos rsrs =P
    E que legal vc ter pego o msm aviao ^^
    Amei o post!!

    Bjos ;*

    fofoquinhainocente.blogspot.com

    ResponderExcluir
  14. Oie flor peço a sua ajuda pra votar
     em mim ,nunca ganhei em naada ,mais sei
    que com a ajudinha de vocês eu posso sim
    conseguir :D , Ajudaa??

    http://chiquissimas.blogspot.com

    Blog: only- Girls2


    OBS: Tá Na barra lateral 


    Conto com você e no que puder estar ajudando é so falar ;)






    =--------------------------------------------------------=

    Seus tuto's são muito perfeitos amo tudoo aqui 

    BZOSS ;)

    ResponderExcluir
  15. Eu adorei este tutorial e ontem mesmo eu estava procurando por ele mas não encontrei,agora aqui tem td né? ^^ rsrs

    Post novo,confere Liah? :D

    http://meianoite-br.blogspot.com/

    ResponderExcluir
  16. AAhh,acabei de aplicar o efeito e ameeei o resultado! Já tinha visto aqui no seu cantinho e fiquei muito feliz de ter aprendido! Aquele efeito sublinhado me irritava mesmo...rsrsrs

    Beeijo linda!
    http://backstreetmorgan.blogspot.com

    ResponderExcluir
  17. Estava procurando há um tempo este tutorial, mas agora que achei aqui!

    Obrigada Liah!Beatriz Andrade ,http://paraisodemenina.blogspot.com/

    ResponderExcluir
  18. Que linda você comentando no meu blog, awn <3 Hey Liah, como faço pra ser destaque aqui no Cherry Bomb? Tem algum sorteio, promoção?

    Beijo enorme =)
    onthefame.tk

    ResponderExcluir
  19. eu fiz, mais não ficou na sidebar do blog não :S

    ResponderExcluir
  20. amo o cb. Amei o tutorial..  Seguindo, segue de volta?
    http://tamichesteen.blogspot.com/

    ResponderExcluir
  21. Ah , eu amei o tutorial e já usava ele (:
    Seu blog tá lindo Liah ^^
    Preciso da sua ajuda em um concurso , vota em mim no blog Perfeitinha ?Basta entrar neste blog >perfetinha-blog.blogspot.com  e o gagdet ao lado dos seguidores você verá uma enquete , procure por Amazing Moda é o 6º nome e depois abaixa la embaixo e clique em votar !Obrigada [=  Beijos , novo layout confere ?http://amazingmoda.blogspot.com/

    ResponderExcluir
  22. Adorei. Ah, Liah, eu reativei meu blog. Dá uma passada lá ok? Bj. http://desbloqueiodesentimentos.blogspot.com/

    ResponderExcluir
  23. Tem uma tag pra você lá no meu blog:

    http://queloucura-blog.blogspot.com/2011/11/tag-3-manias-estranhas-que-voce-tem.html

    ResponderExcluir
  24. esse era o que o meu blog tava precisando oobg!

    ResponderExcluir
  25. Super dica, amanha eu vou tirar o sublinhado dos meus links porque agora ta tarde =P

    http://crazymanic1.blogspot.com/

    ResponderExcluir
  26. Nossa, sério, eu venho de conhecer esse blog, mas só pela página inicial, comecei a seguir, amei muito!
    Juro, vocês tem muito sucesso como bloqueiras pela frente! haha!
    Por favor, sigam meu blog, e deem uma dica de como d para melhorar!
    obrigada
    ass: Maca Verde
    o blog- www.macaverde2009.blogspot.com
    obrigada de novo! hahahaah! ;P

    ResponderExcluir
  27. Sim flor, teve um concurso recentemente e os vencedores ganharam destaque. Em breve teremos novos concursos e vc poderá participar =)

    ResponderExcluir
  28. Vou colocar lá no meu blog.
    Estou começando no mundo dos blogs hoje, espero contar sempre com sua visita.
    http://combinacaocerta.blogspot.com/

    ResponderExcluir
  29. Oi Liah, tenho uma dúvida em meu blog... Sabe em baixo da postagem, onde aparece "tantos comentários", "quem postou" e "marcadores"? No meu blog só aparece os comentários, como faço pra aparecer os outros? Já tentei ir em Elementos da página e editar lá, mas não consegui :/ Agradeceria muito se me ajudasse. Beijo pra você e sucesso com o blog.

    Beijos, onthefame.tk

    ResponderExcluir
  30. muito bom mais como põe essa caixa de comentarios no meu blog isso não aparece

    ResponderExcluir
  31. aaaaaaaaah obrigada por arrumar liah você é 10! sim sobre a Hístoria mal feita que eu criei kkkk é sim tenho que formatar, pequenos erros? eu arrei praticamente tudo ahshaush beijos.

    ResponderExcluir
  32. aaaaaaaaah obrigada por arrumar liah você é 10! sim sobre a Hístoria mal feita que eu criei kkkk é sim tenho que formatar, pequenos erros? eu arrei praticamente tudo ahshaush beijos.
    http://duasgarotasoficial.blogspot.com/

    ResponderExcluir
  33. Eu amei o tutorial e já coloquei no novo layout que eu to montando
    Como coloco esse efeito nos títulos dos posts? Ele continua com o sublinhado mimi
    obg, beeijos!

    recantodalara.blogspot.com

    ResponderExcluir
  34. Teu blog é lindo, parabéns pela criatividade e sucesso! :)

    ResponderExcluir
  35. No meu theme não tem esse código, você sabe porque?

    http://nossas-fotografias.blogspot.com/

    ResponderExcluir
  36. Deve ser porque vc pegou um código pronto em um site, e não um modelo do blogger mesmo, então o código dos links pode estar diferente...

    ResponderExcluir
  37. E você poderia olhar qual é o código do que uso?
    www.nossas-fotografias.blospot.com

    ResponderExcluir
  38. Não tem como dizer flor, só olhando no HTML. Procure algo parecido com o código que eu passei.

    ResponderExcluir
  39. Thanks minha linda fofa!Você sempre ajuda!Um anjo do céu... kkk tutos perfeitos!
    http://bonequinhadeporcelana.tk 
    Em reforma!!

    ResponderExcluir
  40. oi floor amo q amos eu blog me ajuda mt será qpode dá uma passadinha no meu , podemos fazer parceria? 
    meumundinhuuh.blogspot.com

    ResponderExcluir
  41. Adorei! Estava morrendo atrás disso, obrigada :*

    ResponderExcluir
  42. amr... eu nao consiguo coloca esse efeito no titulo da postagem vc pode ajuda ?

    ResponderExcluir
  43. Que lindo o efeito Liah , eu usava no meu antigo . Perfeito (:

    raascunhoqualquer.blogspot.com (= Sigam ?

    Bjo =*

    ResponderExcluir
  44. Muito obrigado . Graças aos seus tutorias eu to conseguindo fazer meu próprio Layout *---* Eu sei que ta feio mais é o primeiro neea :S .
    Acessa lá se puder e da a nota . Ficarei muito agradecida se puder http://girl-super-secret.blogspot.com.br/

    ResponderExcluir
  45. Adorei o efeito, super diferente.
    Seus posts, cada vez mais impressionantes e criativos.

    Um grande beijo Liah!

    ResponderExcluir
  46. Eu li tudo e adorei!E funcionou!
    especialprameninas.blogspot.com

    ResponderExcluir
  47. AAi, amei, amei, amei! lindíssimo o resutado! Flor, amo seus tutôs, tá! haha!"
    Visita meu blog, coments! Ele ainda tá no começo!!
    pqngarota.blogspot.com vou fica mto happy! bjs!!

    ResponderExcluir
  48. Adoro colocar esse efeito,fica muito mais kawaii~
    adoro seu blog Liah ~

    ResponderExcluir
  49. Obrigadaaaaaaaaa! Usei *-* Sua linda!

    ResponderExcluir
  50. Liah, eu procurei o código da sidebar mas não apareceu código algum daquele jeito, pode me dizer por que?
    nossojeitinhodeser-girl.blogspot.com.br <-- acessa?

    ResponderExcluir
  51. ADOREI!!! Muito obrigada, Liah! >.<
    blogthistime.blogspot.com

    ResponderExcluir
  52. Amei o tutorial,já estou usando,repassei o tutorial mais claro coloquei os créditos!Beijos.
    http://bloggogirls.blogspot.com.br/

    ResponderExcluir
  53. Amei Amei Amei !!

    Paaarabens Liah

    http://www.giihsandbomb.blogspot.com.br/

    ResponderExcluir
  54. Prabens gata arrasou como sempre !!! Vleu fofa pelo tuto me ajudou em ! Bijuuuuuuuuuuuuuuuuuuuuuus e Bjinhooooos

    Amanda

    ResponderExcluir
  55. Ótimos os seus tutoriais, Liah! Nunca desista dos seus tutoriais, eles ajudam muito a mim! rs

    Beijocas...

    Julianayra.blogspot.com

    ResponderExcluir
  56. Não consegui, por mais que eu entenda super fácil os tutoriais aqui, jesus que burrice a minha.-.
    www.tamirissindice.blogspot.com

    ResponderExcluir
  57. Não consegui,no HTML do meu blog não tem essa palavra

    ResponderExcluir
  58. Amo seus tutoriais

    ~~ http://girlsonlyrevista.blogspot.com.br/

    ResponderExcluir
  59. Obrigada estava doida atras desse efeito, consegui fazer com sucesso e amei =^-^=
    Dá uma olhada lá no GA
    http://projectgoldena.blogspot.com.br/

    ResponderExcluir

Related Posts Plugin for WordPress, Blogger...