Veja o print:
Existem muitas formas de colocar em seu blog, vou compartilhar 2: uma mais simples, apenas um gadget e a outra mais avançada, que requer mexer no código-fonte do blog.
Para começar, a paginação mais simples:
Acesse a aba Layout de seu blog e clique em Adicionar um gadget. Escolha a opção HTML/JAVASCRIPT e na janela que expandir cole isso:
<!-- Página numeradas para blog-->
<style type="text/css">
#blog-pager{
font-size:12px; /* TAMANHO DA LETRA */
padding:10px 0;
clear:both;
}
.showpageArea{
font-family:verdana,arial,helvetica; /* TIPO DA LETRA */
color:#000; /* COR DA LETRA */
font-size:13px;
margin:10px
}
.showpageArea a{
color:#000;
text-shadow:0 1px 2px #fff;
font-weight:700
}
.showpageNum a{
padding:3px 8px;
margin:0 4px;
text-decoration:none;
border:1px solid #f2dd9d; /* COR DA BORDA EM ESTADO NORMAL */
-webkit-border-radius:3px; /* GRAU DE ARREDONDAMENTO DO FUNDO */
-moz-border-radius:3px; /* GRAU DE ARREDONDAMENTO DO FUNDO */
background:#f2dd9d; /* COR DE FUNDO DA NUMERAÇÃO EM ESTADO NORMAL*/
color: #000;
}
.showpageNum a:hover{
border:1px solid #ec92c6; /* COR DA BORDA DA NUMERAÇÃO EM ESTADO HOVER */
background:#ec92c6; /* COR DE FUNDO DA NUMERAÇÃO EM ESTADO HOVER */
color: #fff; /* COR DA FONTE DA NUMERAÇÃO EM ESTADO HOVER */
}
.showpageOf{margin:0 4px 0 0
}
.showpagePoint{
color:#fff; /* COR DA FONTE DA NUMERAÇÃO ATIVA */
text-shadow:0 1px 2px #333;
padding:3px 8px;
margin:2px;
font-weight:700;
-webkit-border-radius:3px;
-moz-border-radius:3px; /* COR DE FUNDO DA NUMERAÇÃO */
border:1px solid #999; /* COR DA BORDA DA NUMERAÇÃO ATIVA*/
background:#9460b8; /* COR DE FUNDO DA NUMERAÇÃO ATIVA*/
text-decoration:none
}
</style>
<script style='text/javascript'>
var numshowpage=5; /* NÚMERO DE PÁGINAS EXIBIDAS*/
var postperpage =5; /* NÚMERO DE POSTS POR PÁGINA*/
var upPageWord="Anterior";
var downPageWord="Seguinte";
var home_page="/";
var urlactivepage=location.href;
</script>
<script style='text/javascript' src='http://widgets.way2blogging.org/blogger-widgets/w2b-blogger-pagenavi.js'></script>
<!-- Final do código-->
Deixei marcado no próprio código tudo que pode ser alterado para que as cores combinem com seu blog.
Depois que terminar a personalização salve o seu gadget e arraste-o para o final do blog. Salve as alterações.
Agora as páginas numeradas que eu uso aqui no blog:
Comece acessando a aba Modelo de seu blog. Clique em Editar html e na caixa do código-fonte tecle Ctrl+F. Na caixinha de busca que abrir digite </body>. Acima disso cole o script que fará a paginação funcionar sem erros:
<script style='text/javascript'> var pageCount=5;var displayPageNum=6;var upPageWord="Anterior";var downPageWord="Próxima";</script> <script src='http://static.tumblr.com/y66747w/DqWm7hhf3/page-nav.js' style='text/javascript'> </script>
Você pode alterar as palavras Anterior e Próxima pelas que desejar. Pode também alterar a quantidade de postagens exibidas por página mudando o número 6 (em displayPageNum=6) pelo de sua preferência.
Se quiser mudar a quantidade de páginas exibidas altere o número 5 (em pageCount=5) pelo número que desejar.
Feito isso salve as alterações.
Agora digite dentro do campo de busca ]]></b:skin> e acima dele cole este código:
/* Páginas numeradas --------------------------- */
.showpageArea {
font-family:Verdana, Geneva, sans-serif;
color: #000;
font-size:11px;
margin:10px; }
.showpageArea a { padding: 3px 8px;
margin: 2px;
font-weight: 700;
text-decoration: none;
color:#777; /* COR DA FONTE DO LINK PRÓXIMA */
border:1px solid #ccc; /* BORDA DO LINK PRÓXIMA */
background: #eee; /* COR DE FUNDO DO LINK PRÓXIMA */ }
.showpageNum a { padding: 3px 8px;
margin:0 4px;
text-decoration: none;
border:1px solid #999; /* BORDA DA NUMERAÇÃO */
background: #ddd ; /* COR DE FUNDO DA NUMERAÇÃO */ }
.showpageNum a:hover {
border:1px solid #888; /* BORDA DA NUMERAÇÃO QUANDO O CURSOR ESTÁ EM CIMA DELA */
background: #ccc; /* COR DE FUNDO DA NUMERAÇÃO QUANDO O CURSOR ESTÁ EM CIMA DELA */ }
.showpageOf{ margin:0 8px 0 0; }
.showpagePoint {
text-decoration: none;
padding: 3px 8px;
margin: 2px;
font-weight: 700;
border:1px solid #999; /* BORDA DA NUMERAÇÃO ATIVA */
background: #666; /* COR DE FUNDO DA NUMERAÇÃO ATIVA */
color:#fff; /* COR DA FONTE DA NUMERAÇÃO ATIVA */ }
/*Fim do código páginas numeradas --------------------------- */
Como você percebe o código é autoexplicativo. Faça as alterações que desejar para que as cores combinem com seu blog e a seguir salve as alterações.
Dicas importantes:
- Para que a numeração de páginas funcione é preciso que seu blog seja público pois blogs privados não podem ter a paginação.
- É preciso que os feeds de seu blog estejam corretos pois esses gadgets se baseiam nos feeds. Clique aqui e aprenda tudo sobre feeds em um só lugar.
- É preciso que a quantidade de postagens definidas nos códigos seja a mesma definida nas suas configurações do blog. Verifique isso clicando Configurações/ Postagens e comentários.Defina aí, em Mostrar no máximo a quantidade de postagens a serem exibidas.
Gostou?
Se fizer diga nos comentários, gosto de ver...
Gostou e quer ter em seu blog mas não tem tempo/paciência/jeito para lidar com códigos?
Entre em contato comigo e por um valor simbólico eu faço pra você!
Entre em contato comigo e por um valor simbólico eu faço pra você!
