Links em fade e sem sublinhado

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!