15 de jul de 2012

Links em fade


Como vão amores do papai? Espero que muito bem :) Quem quer mais um tutorial? Então, vamos aprender hoje a colocar os links do seu blog em fade que é quando passa o mouse nele ele muda a cor! E para quem ainda não entendeu veja o exemplo do nosso blog, ele está com os links em fade. É bem fácil de se fazer e eu espero que entendam tudo direitinho!


1 - Abra seu blog > Vá em desing > Editar HTML >
2 - Aperte F3 e procure por:a:link {
3 - Quando achar deve ter um código mais ou menos assim:

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);
}
4 - Apague todo esse código e substitua por:

a:link {
color: #E9A1C0;
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;
text-decoration:none;
filter:alpha(opacity=100);
-moz-opacity: 1; -khtml-opacity: 1; opacity: 1;
}
a:hover {
color: #707070;
text-decoration:none;
filter:alpha(opacity=100);
-moz-opacity: 1; -khtml-opacity: 1; opacity: 1;
}
5 - Faça a devidas alterações mais não salve ainda. Isso já se ativou na área dos posts. Mais se quiser ativar na sidebar tambem procure por:.sidebar .widget a:link {
6 - Deve ter um código mais ou menos assim e você deve apaga-lo:

.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;
Pronto visualize e veja se está tudo certo se estiver salve!

4 comentários:

  1. Ótimo tutorial!Gosto muito de links em fade, dá um efeito legal nos links, uso sempre *--*
    Amo seu cantinho! Obrigada pela visita.

    http://princesacrista.blogspot.com.br/

    ResponderExcluir
  2. Eu uso lá no Blog, não curto o sublinhado que é o estilo padrão do Blogger!
    Abraço!
    http://blog-part-of-me.blogspot.com/

    ResponderExcluir
  3. Muito bom! é um ótimo efeito! :D

    ResponderExcluir