Tutorial - Efeito Fade nos Links

 

Yoo ! ~

Desculpem a demora pra postar ;x

Hoje eu trouxe um tuto fácil que achei no Cherry Bomb .

É o efeito fade nos links do blog.

Se repararem, usamos aqui o Kawaii. Quando você passa o mouse em um link , a cor muda bem devagar (:

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;

}

Faça as mudanças que preferir nas cores e depois salve (:

O código acima só funciona para a área dos posts, se quiser também com os links da Sidebar, prossiga.

Procure por esse código e 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;

}

Visualize e salve ! ~