Como Colocar Páginas Numeradas no Blog

Mais opções de navegação em seu blog, insira já.

Facilitar a navegação em nosso blog, é isso que buscamos melhorar a cada dia para que os visitantes encontrem rapidamente o que procuram ou que encontrem coisas que podem se de seu interesse. E para isso, temos a opção de colocar páginas numeradas no blog que melhora e muito o conceito que tratamos, pois podemos ir da página inicial para qualquer outra página sem termos que passar nas que não queremos por exemplo.

Trocar postagens recentes e antigas por páginas numeradas não é mais complicado como antigamente, por isso apresentamos essa opção para ter em seu blog com pequenos passos, veja como é fácil.

Seguindo os passos ficará como na imagem abaixo:

Passo a passo

1- Acesse seu Blogger e vá em "Layout".

2- Clique em "Adicionar um gadget" em qualquer parte e escolha do tipo "HTML/Javascript".

3- Dentro do conteúdo do gadget cole o seguinte código.

<style>
#blog-pager{clear:both;margin:20px 0 20px;font-size: 12px;padding:10px 0;}
#blog-pager-newer-link{float: left;}
#blog-pager-older-link{float: right;}.Profile img{border:3px solid;float:left;margin:5px 10px 5px 0;padding:2;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
.profile-data{color:#999999;font:bold 20px/1.6em Arial,Helvetica,Tahoma,sans-serif;font-variant:small-caps;margin:0;text-transform:capitalize;}
.profile-datablock{margin:0.5em 0;}.profile-textblock{line-height:1.6em;margin:0.5em 0;}a.profile-link{clear:both;display:block;font:80% monospace;padding:10px 0;text-align:center;text-transform:capitalize;}
h2.date-header, .PageList h2{display:none;}
#blog-pager-older-link a,#blog-pager-newer-link a,a.home-link,.showpageNum a,.showpage a{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhR-YFounYw8FQhhn_9xTbELFaOf3ieLxnLlNZtciq53hG1M5-rTkd3bovSrDZ3tUYlffa-tON81JrGIaRyu4txLmwPZGcu-Ncr1rRpLWDfQ2o7ni8ElhL3YpfKwfwhG0jDnEdoIZxafN4/s1600/nav.jpg) repeat-x;border:1px solid #ae4402;color:#fff;margin:2px;padding:6px 10px 5px;text-decoration:none;text-shadow: 1px 0 1px #000;}
#blog-pager-older-link a:hover,#blog-pager-newer-link a:hover,a.home-link:hover,.showpageOf,.showpagePoint,.showpageNum a:hover,.showpage a:hover{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFMl0FlGWyhQXTdpIU0yqZUeP7BBRqVI4QfaSQ-NkbU0bGeZwAwg-7SInsVlm-DXieDNr5oSQUur8Mxku9kKiZptGobLhHkUsjaEGBzAIifju-4qyOhJuKD-D9TmtyBGyyDx3sYs9HlSU/s1600/nava.jpg) repeat-x;border:1px solid #000000;color:#fff;margin:2px;padding:6px 10px 5px;text-shadow: 1px 0 1px #000;}
</style>
<script type='text/javascript'>
var postperpage=7;var numshowpage=5;var upPageWord="Anterior";
var downPageWord="Pr&oacute;xima";
var urlactivepage=location.href;var home_page="/"
</script>
<script src='http://dl.dropbox.com/u/35784805/Mil%20Trucos%20Blogger/paginacionbloggermtb.js' type='text/javascript'></script>

Atenção para as configurações:

Em var postperpage=7, troque o 7 pelos número correspondente ao de postagens por página de seu blog.

Em var numshowpage=5, troque o 5 pelo número de paginas que você deseja que seja mostrado.

* Se você tem experiência com CSS, pode alterar outros trechos e personalizar mais ao seu gosto.

4- Clique em "Salvar" e depois "Salvar Organização".

5- Vá em seu blog e veja o resultado.

Gostou? Comente. Seu comentário é a motivação para nosso trabalho.