Links em fade e sem sublinhado

Eu estou realmente amando postar mais de uma vez por dia no blog, hehehe. Falando novamente sobre personalização, hoje, irei ensinar a vocês como colocar o efeito Fade nos links. Fade é aquele efeito super fofo na qual quando se passa o cursor do mouse no link, ele vai mudando de cor lentamente, em uma transição suave. Eu uso aqui no TEP, o efeito fica assim: PASSE O MOUSE. Ah, e além de tudo, o código também tira aquele sublinhado horroroso que fica abaixo dos links. Então, vamos lá!


Vá em Tema > Editar HTML > Aperte CTRL + F e pesquise por a:link { e você achará algo 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);
}
Apague todo esse trecho e o substitua por:
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;
Prontinho, agora é só trocar as cores pelas de sua preferência. Veja essa tabela aqui para te ajudar melhor 🙂. Ah, mas esse código irá se aplicar somente aos links dos posts, se quiser o mesmo efeito na Sidebar, procure pelo código abaixo e apague ele (procure pela primeira linha, para ficar mais fácil):
.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 para remover o sublinhado é só procurar por a:hover { e logo abaixo terá: text-decoration:underline; troque o underline por none e prontinho.

Disponível para reblogar