segunda-feira, 7 de outubro de 2013

#Tuto; Navegação do blog com efeito degradê!



Oi amores, hoje vim trazer para vocês um tutorial(o primeiro tutorial do blog-awnn),  vou ensinar vocês à deixarem a navegação do blog bem mais fofa. Quer aprender? Então vamos lá, clique em ''Continue lendo''!
Pra quem não sabe o que é navegação, tá aqui uma foto:

Agora vamos logo 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;
}

Edite da forma que você quiser, as instruções estão no código. Prontinho, agora é só salvar! 
XOXO*.

Nenhum comentário:

Postar um comentário