quarta-feira, 25 de julho de 2012

Navegação do blog com efeito degradê



Outro tuto... Aproveitando que hoje estou cheia de idéias (kkk), porque tem dia que, meu Deus, não tenho uma idéia de post! Agora vou ensinar vocês deixarem a navegação do blog com efeito degradê. Pra quem não sabe o que é navegação, é isso aqui:

                                           

Então, é bem simples, só prestar bastante atenção. Vamos ao tutorial:

Vá no HTML do seu blog e procure por #blog-pager { e cole o código abaixo encima da 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;
}
 Agora é só você editar como quiser as cores, está tudo explicadinho no código.

Nenhum comentário:

Postar um comentário