Links do Blog em fade

O tutorial foi aprendido no Place Fame - Extras, créditos a ele.

Oi pessoal, hoje vou ensinar com fazer os links em fade (como a maioria dos Tumblrs tem) e é muito fácil.

Vamos ao tutorial:

1° passo: Acesse o painel do Blogger , escolha o blog que você deseja instalar, selecione a opção "Modelo" e clique em "Editar HTML".

2°passo: Agora usando o Ctrl + F, 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); }

3°passo: Agora é só substituir por este código:

a:link { color: #E9A1C0; /* link normal */ 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; /* links visitados */ text-decoration:none; filter:alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; } a:hover { color: #707070; /* link ao passar o mouse */ text-decoration:none; filter:alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; }

O valor (0.7s) no código, define a velocidade em que os links mudam de cor. Quanto maior o número mais lento ficará.

• Se você quiser os links apenas na barra lateral , procure por:

.sidebar .widget a:link { color: $(widget.link.color); text-decoration: none; }
Vai aparecer algo mais ou menos assim:

.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; }


Apague isso e coloque o mesmo código da segunda quote. 

Isso é tudo! Até o próximo tutorial!

Share This :