Efeito Fade nos Links

Efeito Fade nos Links

Olá pessoal, tudo bem? Hoje eu passarei para vocês como fazer o efeito fade nos links. Esse efeito para quem não sabe, é aquele onde os links mudam a côr de uma forma bem suave ao passar o mouse em cima e eu acho super lindo!

Vamos fazer?

No painel do seu blog, acesse o Modelo e clique em Editar HTML. Esta ação te dará acesso a todos os códigos do seu blog. Clique dentro da caixa que estão os códigos, pressione Ctrl F e dentro da janelinha que abrir cole este código: a:link {  e dê Enter. Este código ficará em evidência e logo abaixo dele você encontrará 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 este código todo e substitua por este:

 

Caso queira que os links da sidebar fiquem iguais á este, procure pelo 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;
}

Após mudar as cores para que combine melhor com o seu layout, clique em visualizar modelo para se certificar de que tudo está certo, e se estiver do seu gosto salve!
Lembrando que sempre que for mexer no HTML do seu blog, faça o backup do mesmo antes de qualquer modificação, pois caso algo dê errado, você o terá salvo no seu computador.

Para acessar a tabela de cores clique aqui.


Espero que tenham gostado!

Um abraço!







Compartilhe:

0 Comentários Fofos

Ola! Muito obrigada por acessar o Blog e obrigada também por se disponibilizar a comentar as postagens!
Fique a vontade para interagir e seja muito bem vindo (a)!!!

Protected by Copyscape