Personalizar Links com Css

hoje o tuto é sobre personalização de links.como no print:
normal

com o mouse sobre



O link tem varios estados ai vão eles:

Hover: acontece quando o mouse esta sobre o link.

Visited: são os links que já foram visitados

Active: acontece quando o link leve um click


Bom para personalizar o css, abra o blogger, vá em modelo > personalizar > editar html

e antes de  ]]></b:skin>
e cole:
<--------------------------------------------------------------------------------------------------------->
//* feito por gui todos os direitos
http://kyuubidesigners.blogspot.com*//


a:link {
color:  #####; /*cor do link normal*/
 text-shadow: black 0.1em 0.1em 0.2em; /*sombreado 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;/*efeitos de transição(não  mecha aqui)*/
}
a:visited {
color:#696969;/*cor do link visitado*/
text-decoration: none;
-webkit-transition: color 0.7s ease-out;-moz-transition:
color 0.7s ease-out;transition: color 0.7s ease-out;/*efeitos de transição(não  mecha aqui)*/
}
a:hover {
color:#000000;/*cor do link quando o mouse estiver por cima*/
text-shadow: black 0.1em 0.1em 0.2em,0 0 10px #1E90FF, 0 0 20px #1E90FF, 0 0 30px#1E90FF, 0 0 40px #87CEEB, 0 0 70px #87CEEB, 0 0 80px #DCDCDC, 0 0 100px #DCDCDC, 0 0 150px #AFEEEE; /*sombreado do link*/
text-decoration:none;
font: Verdana, Arial, Helvetica, sans-serif;
}

a:active {
color:#000000;/*cor do link que recebe um click*/
text-shadow: black 0.1em 0.1em 0.2em,0 0 10px #1E90FF, 0 0 20px #1E90FF, 0 0 30px#1E90FF, 0 0 40px #87CEEB, 0 0 70px #87CEEB, 0 0 80px #DCDCDC, 0 0 100px #DCDCDC, 0 0 150px #AFEEEE;/*sombreado do link*/
text-decoration:none;
font: Verdana, Arial, Helvetica, sans-serif;
}

<--------------------------------------------------------------------------------------------------------->

bom por hoje é só valeu