Links em efeito Fade

Esse tutorial é muito útil e eu sempre usava nos meus Templates. Ele deixa os links sem o sublinhado e com um efeito bem parecido com o de opacidade, que na verdade é o efeito fade. Quando passamos o mouse no link, ele muda duas vezes até ficar na cor que decidimos. 

1-Vá em Design > Editar HTML

2-Aperte CTRL+F e procure por  a:link {, abaixo vai aparecer um código parecido com esse.

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

3-Apague esse trecho e cole esse outro código:

a:link {
color: #a1a9e9; /* 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: #b833cc; /*Cor dos links visitados*/
text-decoration:none;
filter:alpha(opacity=100);
-moz-opacity: 1; -khtml-opacity: 1; opacity: 1;
}
a:hover {
color: #a6aac6; /*Cor do link quando passa o mouse*/
text-decoration: underline;
text-decoration: italic;
filter:alpha(opacity=100);
-moz-opacity: 1; -khtml-opacity: 1; opacity: 1;
}

4- Personalize as cores, visualize e se estiver tudo certo, salve.

Para fazer o mesmo efeito na sidebar, procure o código abaixo e o apague. 

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

Meus querides! Caso vocês gostem desse blog e queiram continuar me acompanhando, eu ainda escrevo, mas em outro blog. Não posto apenas tutoriais, mas continuo escrevendo e falando de vários assuntos, inclusive a blogosfera. Caso queira visitar (sério ótimo uma visita): clique aqui para ir ao blog Serenar