PS.: MELHOR VISTO NO GOOGLE CHROME

26 agosto 2013

Blog Pager Personalizado

Antes


Oiiie, mais um tutorial sobre a Blog Pager. Para quem não sabe são aqueles links logo abaixo das postagens escrito Postagens mais antigas, Postagens mais recentes e Início.

Ensinarei como personalizado. Ficará assim:

Depois



É muito simples gente.
1. No HTML do seu blog, aperte Ctrl + F e procure a tag ]]></b:skin>.  Acima dele cole o código abaixo:

/* 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: #FF99FF ; /* 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: #FFCCFF ; /* fundo hover, apague o código abaixo até } se não quiser degradê */
background: -webkit-gradient(linear, left top, left bottom, from(#FFCCFF ), to(#FF99FF));/* webkit browsers */
background: -moz-linear-gradient(top, #FFCCFF , #FF99FF );/* firefox3.6+ */
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#FFCCFF ', EndColorStr=' #FF99FF ');/* IE */
}
#blog-pager-newer-link {
float: left;
}
#blog-pager-older-link {
float: right;



Nenhum comentário:

Postar um comentário