Blogger - Efeito fade em links

http://i37.tinypic.com/2mzk1tl.jpg
  
     Hoje você vai aprender a adicionar ao seu blog (blogger), um dos efeitos mais legais em links, o efeito fade é muito conhecido em imagens e vídeos o efeito traz uma transição suave de uma cor do link para outra quando é passado o mouse por cima (derivado de propiedade mouseover).

Conselho!
   Antes de começar faça um backup de seu template e alerta que outras modificações feitas na seção link de seu template podem ser redefinidas. Agora sim podemos começar!

   Para adicionar o efeito, entre em painel > Modelo / Design > Editar HTML, agora 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);
}

E substitua por:


a:link {
color: $(link.color);
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: $(link.visited.color);
text-decoration:none;
filter:alpha(opacity=100);
-moz-opacity: 1; -khtml-opacity: 1; opacity: 1;
}
a:hover {
color: $(link.hover.color);
text-decoration:none;
filter:alpha(opacity=100);
-moz-opacity: 1; -khtml-opacity: 1; opacity: 1;
}



É só substituir as cores e pré-visualizar e salvar. Mas fazendo apenas isso, o efeito não vai ser aplicado na sidebar.

Adicionando também na Sidebar
    Para você adicionar também na sidebar (nos layouts e rodapé do blog) é necessário que você procure por:

.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 exclua todas essas linhas.

Não esqueça de visualizar antes de salvar para ver se está tudo certo!


Comentários