Links de navegação em Hover Gradiente

Olá anjos!

Hoje trouxe um tutorial de como personalizar os links da navegação em Degradê. Sinceramente, se eu conhecesse esse tutorial eu tinha usados nos meus Templates há mais tempo, fica muito lindo! Pena que não vi.

O tutorial é do blog Go Imagine. Estou apenas repassando, por isso os créditos do tutorial estão nele próprio. Com muita criatividade, dá para fazer uns efeitos legais. Tipo, colocar um plano de fundo no lugar da cor, ou o degradê antes mesmo do hover, etc. Basta usar a criativadade!

Resultado

Vá no seu HTML, aperte CTRL+F e procure por:

#blog-pager {  (ela fica dentro da tag /* Posts) 

Acima disso, cole:

/* Navegação com efeito hover degradê - http://goimagines.blogspot.com.br */
#blog-pager {
clear:both;
text-align: center;
margin:0px auto;
padding:10px;
}
#blog-pager a:link, #blog-pager a:visited{
color: #ffffff; /* cor da fonte */
font-size: 16px; /* tamanho da fonte */
padding:5px;
background-color: #8BC2C9; /* cor do fundo */
-moz-border-radius:10px; /* bordas arredondas, apague se não quiser */
-khtml-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}
#blog-pager a:hover{
color: #ffffff; /* cor da fonte hover*/
padding:5px;
background: #BFCED5; /* fundo hover, apague o código abaixo até } se não quiser degradê */
background: -webkit-gradient(linear, left top, left bottom, from(#BFCED5), to(#8BC2C9));/* webkit browsers */
background: -moz-linear-gradient(top, #BFCED5, #8BC2C9);/* firefox3.6+ */
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#BFCED5', EndColorStr=' #8BC2C9');/* IE */
}
#blog-pager-newer-link {
float: left;
}
#blog-pager-older-link {
float: right;
}

Meus querides! Caso vocês gostem desse blog e queiram continuar me acompanhando, eu ainda escrevo, mas em outro blog. Não posto apenas tutoriais, mas continuo escrevendo e falando de vários assuntos, inclusive a blogosfera. Caso queira visitar (sério ótimo uma visita): clique aqui para ir ao blog Serenar