Dando um *Perfect* nos links do blog

Hoje o post de hoje vai ser super útil. Vou ensinar como personalizar os links do nosso blog para ficarem lindos *u*. Muitas vezes nós ficamos desesperados atrás do link perfeito para o blog e não achamos como Botar sombra no link ou Tirar o sublinhado do efeito hover... Eu amo os links de um blog e, não sei por que, mas quando o link é lindo e que me chama atenção, eu sigo, comento, eu realmente participo do blog. Ás vezes eu fico até brincando com os links passando o mouse e tirando o mouse :D... :s 

Clique em Leia Mais e Let's Go!  

Colocando sombra nos links

É aquele efeito que dá a impressão borrado. Ele é muito lindo e é perfeito para os blogs teens de cores fortes e bonitas. Meu blog não fica bem com esses efeitos Lindos *u*

Vá em designer  Editar HTML  Dê Ctrl+F e procure por

a:link {

Vai aparecer alguma coisa parecida com isso

a:link {

text-decoration:none;

color: $(link.color);

Abaixo, cole essa tag

text-shadow:#767676 0px 0px 1px;}

Vai ficar assim

a:link {
  text-decoration:none;
  color: $(link.color);
text-shadow:#767676 0px 0px 1px;}

Tirando o sublinhado dos links hover

Estava tão ansiosa para postar esse tutorial por que eu mesma descobrir *Sensação de orgulho. Esse efeito apenas tira o sublinhado que mata um blog quando nós passamos o mouse. Vai ficar que nem o meu ó. Teste.

Vá em designer  Editar HTML  Dê Ctrl+F e procure por

a:hover {

Vai aparecer assim

a:hover {

  text-decoration:underline;

  color: $(link.hover.color);

Apenas substitua Underline por None.

Entenda:

Underline: Linha reta em baixo

None: Nenhuma linha

Dashed: Traçejado

Efeito arco-Íris nos links

O efeito é muito gato!! Mas cuidado quando for escolher por que em alguns blogs não combina :s Mas em outros ele fica lindo como no Tudy Teen.

O código é bem simples. É só adicionar um Gadget Java Script/HTML e colar esse código. NÃO COLOQUE TÍTULO

<script src='http://dl.getdropbox.com/u/647003/CiudadBlogger/Scripts/rainbowlinks.js'/>

Efeito fade nos links

Efeito fade é um efeito muito popular nos blogs Teens mas, quem é que vai achar esse efeito feio? Nesse tutorial vou ensinar a fazer o link mudar de cor lentamente e suave quando "passamos o mouse".

Vá em designer  Editar HTML  Dê Ctrl+F e procure por

a:link {

Vai ter uma coisa parecida com isso

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); 

}

Troque por esse

a:link { 

color: #E9A1C0; /* Coloque a cor dos Links*/ 

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; /*Coloque a cor dos Links visitados*/ 

text-decoration:none; 

filter:alpha(opacity=100); 

-moz-opacity: 1; -khtml-opacity: 1; opacity: 1; 

} 

a:hover { 

color: #707070; /*Coloque a cor dos Links quando passa o mouse em cima*/ 

text-decoration:none; 

filter:alpha(opacity=100); 

-moz-opacity: 1; -khtml-opacity: 1; opacity: 1; 

}

Preencha as opções e tudo pronto!

Tutorial terminado. Bjss Luuh Oliveira