14/10/2013

[Tutorial]Links com efeito fade e sem sublinhado

Olá people do meu kokoro *-*

Tudo bom?>-< Bem,como esta semana vou ter testes(incluindo o de História,amanha,e não estudei um calhau 'u') decidi postar um pouco mais ^^
Ah,e para avisar:Sabem aquela "página" Para ti?Eu vou fazer uma página mesmo xD Com tudo organizado \o Amanhã...*foge* Vocês:EI!Ò.Ó *atiram tijolos* Ok ok eu faço T-T Depois...
Bem,mas vamos ao assunto principal do post,se querem ver já sabem o que fazer... :3

Hoje trouxe-vos um tutorial de como por os links como os daqui do blog :3 Eu estive muito tempo há procura do tutorial e depois de muito procurar encontrei no Cherry Bomb(desde já créditos a ele)
Vão ao Modelo e depois ao Editar HTML
(clica para exibir o tamanho orginal)
Aperta Ctrl+F e procura por a:link {,logo abaixo deves encontrar isto:
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);}
Apaga isso tudo e no lugar dele cola isto:
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;
 É só mudar o que está a negrito e já está \o/ Mas,ao fazeres isso o efeito não vai ser aplicado na sidebar.Se quiseres que fique na sidebar também é só procurar por:
.sidebar .widget a:link {
E logo abaixo vais 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;}
Apaga isso tudo.
 Se quiseres apenas tirar o sublinhado procura por a:hover { e logo abaixo onde têm text-decoration:underline; muda para text-decoration:none; e pronto \o\
Espero que tenham gostado :3

                                                  Kissus!>3<

2 comentários:

  1. Essa dica e legal, talvez eu use no meu blog. Pra falar a verdade nem sei direito qual a cor dos meus links kkkkkkkk!
    Sou muito distraído kk.
    Abraço

    ResponderEliminar
    Respostas
    1. Fica muito bem os links assim *-* Ahahaha xD

      Arigato por comentares!Kissus!>3<

      Eliminar

Obrigada por vires comentar!!
P.S: Sou de Portugal, alguma coisa que não percebas avisa u v u

❥Respondo a todos os comentários assim que puder.
❥Podes por o URL do teu blog no fim mas tens de falar do post.
❥Podes pedir tutoriais e utilitários.
❥Podes falar palavrões (como eu falo ás vezes) mas não ofendas ninguém com eles, ok?

♣Não aceito "Seguindo, segue de volta?", só sigo se gostar do blog.
♣Comentários insultosos para com alguém não serão publicados.
♣Não utilizes o teu comentário para publicitar o teu blog.
♣Os pedidos de parceria só são aceites na devida página(com algumas excepções).

♥Podes usar estes bonequinhos:
=((•̪●))= ๑(•ิ.•ั)๑ ٩(●̮̮̃•̃)۶ ε(●̮̮̃•̃)з ٩(×̯×)۶̿ ┌∩┐(◣_◢)┌∩┐ ⊙▂⊙ ⊙0⊙ ⊙︿⊙ ⊙ω⊙ ⊙▽⊙ ⊙﹏⊙ ⊙△⊙ ◑▽◐ ◑ω◐ ◑﹏◐ ●︿● ●ω● ●﹏● ≧▂≦ ≧︿≦ ≧ω≦ ≧﹏≦ ≧▽≦ >︿< >ω< >﹏< >▽< ≡(▔﹏▔)≡ (¯▽¯;) <(“”"O”"”)> (-__-)b (;°○° ) \( ̄︶ ̄)> <( ̄︶ ̄)/ (/≧▽≦/) \(≧3≦)/ \(≧ω≦)/ o(≧ω≦)o o(≧o≦)o ㄟ(≧◇≦)ㄏ ╮(╯▽╰)╭ ╮( ̄▽ ̄)╭ (~o ̄▽ ̄)~o ~ 。。。(~ ̄▽ ̄)~[] (╯-╰)/ (*^3^) 'U_U ♪ ♥ ஐ ▲☼゚ ♣ (๏̯͡๏) †