Navegação personalizada com efeito hover degradê
O resultado será semelhante à esse:
Entre no seu html e procure pela tag #blog-pager { (ela fica dentro da tag /* Posts) feito isso adicione o código abaixo acima dessa tag.
/* 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;}
Acho que não tem muito o que explicar, uma vez que tem as instruções no código, só quanto ao degradê, altere as cores conforme quiser, trabalhando com duas cores de preferência (no código foi usado #8BC2C9e #BFCED5)
http://goimagines.blogspot.com.br/2012/07/navegacao-personalizada-com-efeito.html
0 comentários: