14/06/2012

NL -- Efeito Fade nos links

            
A Dona do blog Let's Be Happy [www] pediu semanas atrás o tutorial como colocar efeito fade nos links e hoje vim trazer ele, pois, acho que dá um toque bem charmoso para blog, eu estou falando desse efeito [www]. Gente desculpas mais não sei onde peguei esse tutorial, já tinha guardado a muito tempo... Quem for dono do tutorial me avisa ok?
                                                         Lets go?



                                    Vá em Design > Editar HTML, aperte Ctrl + F e procure por:
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 e cole:


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;
}



Quem quiser esses efeito nos links da sidebar só basta fazer:

Procure e apague esse código


.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;
}
                                                 E faça o mesmo processo a cima.
                                            Visualizem se estiver tudo certinho, salvem!

10 comentários :

  1. Ah, queria saber mesmo..
    ótimo tutorial =)

    http://bb-garotax.blogspot.com

    ResponderExcluir
  2. Adorei o tutu, é super util, mas já tenho um parecido no meu blog.
    Beijos,
    www.coisasdemenina-vicky.blogspot.com

    ResponderExcluir
  3. Está rolando um concurso no meu blog que você pode ganhar 4 layouts, 2 anos de divulgação entrevista e muito mais! Bjs, http://luan-crazyinhtml.blogspot.com.br/

    ResponderExcluir
  4. Adorei o tutu, é super útil naum é mesmo?
    Boa sexta-feira pra você..
    garota-fashiion.tk

    ResponderExcluir
  5. Ah acho mt lindo acho que vou por la tbm kkk :D



    BEIJUXX
    http://ianapaulinhaaaa.blogspot.com.br/

    ResponderExcluir
  6. Já conhecia. Muito util.3
    http://rosaschiclete.blogspot.com.br

    ResponderExcluir
  7. Obg pela visita no meu blog.


    adoreii efeito

    http://blog-meninasmalucas.blogspot.com.br/

    Beijos.Volte sempre

    ResponderExcluir
  8. Adorei o post se puder me siga
    http://www.onlyrocker.blogspot.com.br/
    ficarei esperando voce ^^"

    ResponderExcluir
  9. Efeito realmente é super lindo!

    beeijos

    http://the--baby.blogspot.com.br

    ResponderExcluir
  10. Adorei o blog!
    Principalmente o post ><
    me siga por favor?

    http://onlyrocker.blogspot.com.br/

    ResponderExcluir