Oii minhas bebês, tudo bem?! Hoje eu ia trazer uns goodies bem legais, fica para quinta-feira, porque semana passada num post da Aninha a Francieli Perez pediu o tutorial de opacidade nos links, o que a gente usa aqui no Pincelando. Queria então atendê-la :)
Vamos começar?!
Vá em Desing ~> Editar HTML ~> Dê um Ctrl+F ou F3 e procure pela seguinte tag:
a:link {
Você vai encontrar os seguintes códigos, logo abaixo:
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);
}
Pois bem, agora você vai apagar tudo, incluindo a Tag pesquisada e substituir por:
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;
}
Agora é só substituir as cores em itálico pela instrução ao lado. Indico essa tabela de cores aqui, mas pode ser outra à sua escolha.
Se você quiser aplicar só na área das postagens e no resto do blog, pare por aqui. Mas se você quiser usar ao todo,incluindo a sidebar, continue :)
Dê novamente um Ctrl+F ou F3 e procure por:
.sidebar .widget a:link {
Você irá encontrar:
.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;
}
Novamente, apague tudo e substitua pelo código:
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;
}
→ Créditos: ♥ ←
Okayzinho pessoal?! Se vocês tiverem alguma dúvida, pode perguntar para mim, espero que tenha esclarecido tudo e com certeza de ajudado Francieli.
Por hoje é só, me aguardem quinta-feira.
Um beijo pitchukas:3
adorei seu blog.. é lindo ;) Primeira vez de muitas que estarei visitando ;)
ResponderExcluirwww.ejhonas.com {Seguindo seu blog para a próxima meta. Se puder seguir o meu o link tá do lado *-*}
Liindo! Muito bom o tutorial :D
ResponderExcluirJá to usando, viu?
Beeijão
#Raawn →Sweet Dreams
olá legal a dica do tutorial,já estou seguindo seu blog,mto sucesso
ResponderExcluirbeijos
www.dondokafashion1.blogspot.com.br
Oi que show seu tutorial!
ResponderExcluirAmei seu blog, seguindo!
Beijos
@maihferreira
http://ithecloset.blogspot.com
Aii q show*-* esse vou ter q por no meu blog...
ResponderExcluirwww.fashionemcores.com