Tá muito difícil para eu postar agora... minha internet é um lixo, caindo toda hora. E ainda por cima to entrando em clima de provas. Quando eu falei que minha internet tá caindo toda hora, estava mentindo. Pois ela tá é caindo à cada minuto. Tá beeeeem sufocado para eu postar! Mais tirei um tempinho e vou postar o que eu prometi para uma leitora: Links coloridos em fade! Vocês perceberam já que quando passamos o mouse em algum link daqui do blog, ele muda de cor aos poucos... e isso se chama: Fade. Vamos aprender?
Mais é claro que no seu template já deve conter algum código que deixa os links coloridos, por isso você proucurar 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);
}
Agora, substitua este código pelo código abaixo:
a:link {
color: #E9A1C0;
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;
text-decoration:none;
filter:alpha(opacity=100);
-moz-opacity: 1; -khtml-opacity: 1; opacity: 1;
}
a:hover {
color: #707070;
text-decoration:none;
filter:alpha(opacity=100);
-moz-opacity: 1; -khtml-opacity: 1; opacity: 1;
}
- Azul bebê: Cor sem passar o mouse;
- Lilás: Cor dos links visitados;
- Azul: Cor ao passar o mouse;
- Laranja: Quanto maior o número (0.8s, 0.9s [...]) mais lento será o fade de cores. Quanto menor (0.6s, 0.5s [...]) mais rápido será a transição das cores.
ATENÇÃO! Os links da sidebar vão ficar sem esse efeito, para fazer ele funcionar proucure por e apague todo o código abaixo.
.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;
}
Faça as modificações necessárias e visualize, se estiver tudo certo, salve! E está aí, espero que tenham curtido. Beijos, @emilycaaroline
Ameii já fiz no meu blog o efeito é muito legal, obg por compartilhar :D
ResponderExcluirhttp://meninasapeca.tk/
Tava procurando isso a um tempão! obrigada =)
ResponderExcluirwww.bombadecereja.tk
Ooi!
ResponderExcluiro seu blog é PERFEITOO! Me ajudou muito com os tutoriais. Muito Obrigada. E claro, que não deixaria de seguir!!
Segue o meu também?
Beeijos=**
www.blogmodasdegarotas.blogspot.com
super prático!
ResponderExcluiramei:D:D ja to usando
Adorei, vou testar lá no GI, fica um efeito bonito ao contrário daqueles que os blogs postam por aí, aquele quase deixa a pessoa cega rs. Eu vi o tuto lá no Ecleticu's, aquele blog é muuito perfeito *o* A unica diferença do tuto é que aquele ensina como por fundo na barra fixa e no meu como por na barra móvel ;)
ResponderExcluirgoimagines.blogspot.com
Ah, ensina como personalizar a área dos comentários? Eu vi um tuto no Menina Nerd mas não deu muito certo...
ResponderExcluirFlor , preciso de vc ! Eu tentei fazer o tuto mais não deu certo porque eu não achei o codigo para procurar pois o meu feito e feito com um mcodigo que vc acrecenta depois do skin , sabe ?! Em fim não achei vc podia me falar qual outro codigo que eu possa procurar para adicionar este efeito ?!
ResponderExcluirMe responda por aqui mesmo pois meu blog está de reforma ! Obrigada flor e desculpa a amolação !
Bjãao,
Rafa
Amei o Tutorial. Eu já tinha visto esse efeito em outros Blogs, mas não sabia o nome desse Efeito e nem como procurar. Créditos ao Extras Place Fame!
ResponderExcluirhttp://blog-onedream.blogspot.com/
Super legal! *---*
ResponderExcluirÉ mas eu queria e pedir uma coisinha, pode?
Eu reparei que seu blog agora está com as pontas arredondadas, você poderia ensinar com faz? POR FAVOR? D=
Beijos e até mais ..
http://blogskygalaxy.blogspot.com/
Rafaela: Proucura por a:link, ou a:hover ou a:visited. (=
ResponderExcluirQue bom que gostou das indicações. *-*
ResponderExcluiradorei, super prático, vou usar depois.
ResponderExcluirTem post novo. Comenta?
girlteen-s2.blogspot.com
ei amor, tem post novo la no blog que tal conferir ? *-*
ResponderExcluirhttp://paradateen1.blogspot.com/2011/09/teste-quem-voce-levaria-pra-praia.html ! ☻
Oi amore, estou participando de um concurso, será que você pdoeria me ajudar?
ResponderExcluiré só entrar ensse link:
--> http://girlteen-s2.blogspot.com/2011/08/votacoes-abertas.html
E votar em ser menina!
Beijos e obrigada desde já!
http://sermenina-blog.blogspot.com
Oi amore, estou participando de um concurso, será que você pdoeria me ajudar?
ResponderExcluiré só entrar ensse link:
--> http://girlteen-s2.blogspot.com/2011/08/votacoes-abertas.html
E votar em ser menina!
Beijos e obrigada desde já!
http://sermenina-blog.blogspot.com
Oi emily, to doidinha para você postar o tuto de diminuir os marcadores, e tal....
ResponderExcluirAmei esse tuto ai!
Já estou usando, muito útil ^^
Beijos
http://sermenina-blog.blogspot.com
Owwn so thaaanks por fazer o tuto que eu pedi Emily :3 Nem sei como o Extras PF e o PF podem ser tão perfeitos! kkkk
ResponderExcluirJá vou colocar lá :D
Bjoos
Girls On-Line
Adorei seu blog,já esrou seguindo,segue de volta:http://cuteteenmy.blogspot.com/
ResponderExcluirFlor , meu blog reabriu com desing novo ! Passa lá e deixa sua opinião ,ok?! Te espero ,ah consegui fazer o tuto , muito obrigada # !
ResponderExcluirhttp://blogdasgarotasby.blogspot.com/
AA esse blog e lindo!
ResponderExcluirO Place Fame, também!
Aceita afiliação?
bjs
charmofpink.blogspot.com
Flor, me ajuda com uma coisa? como é que ajeita a letra do titulo do gadget? eu não consigo! já tentei mecher qe só. designer do modelo... HTML... não vai!
ResponderExcluirwww.blogueirasteen.blogspot.co,
Noossa obg, todas as vezes que eu tentava fazer um tutorial pra fazer as mudanças nunca dava certo hj foi a primeira vez, axo que eu to com sorte pq hj é meu niiver
ResponderExcluirAmei este efeito, lindo e fácil *o*
ResponderExcluirhttp://garotasederivados.blogspot.com/
Aaah, valeu brigadíssimo gata.
ResponderExcluirKissus da Gabriela:
4-brownies.blogspot.com
Amei o tutorial! estou usando!!!
ResponderExcluirNossa, no meu blog não tem esse código para substituir. Será que é porque eu estou usando um layout completamente personalizado?
ResponderExcluirwww.tamirissindice.blogspot.com
Adorei o tutorial, ficou perfeito no meu blog. Eu rebloguei, tudo bem? Coloquei os devidos créditos.
ResponderExcluirdiamondfearless.blogspot.com