Código para numerar páginas no blog

Atenção: Este Hack não está mais funcionando. Confira novo artigo disponível com o código Corrigido!

Sabe aquela numeração no final da pagina que mostra em qual página você está e quantas tem antes e depois dela? Quer aprender a colocar numeração na página do blog? (Veja exemplo na figura abaixo)

Vamos a primeira parte da instalação.
Copie todo o código abaixo e cole-o ANTES da tag ]] :

.showpageArea a {text-decoration:underline;}.showpageNum a {text-decoration:none;border: 1px solid #ccc;margin:0 3px;padding:3px;}.showpageNum a:hover {border: 1px solid #ccc;background-color:#ccc;}.showpagePoint {color:#333;text-decoration:none;border: 1px solid #ccc;background: #ccc;margin:0 3px;padding:3px;}.showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}.showpage a {text-decoration:none;border: 1px solid #ccc;padding:3px;}.showpage a:hover {text-decoration:none;}.showpageNum a:link,.showpage a:link {text-decoration:none;color:#333;}

Você deve personalizar as cores das letras, fundo e bordas na paginação para combinar os estilos de acordo com seu template ou a seu gosto, trocando sempre onde está:
border: 1px solid #ccc; (cor e estilo da borda)
background-color:#ccc; (cor de fundo)
Estes elementos aparecem várias vezes no código, portanto eu sugiro que você modifique todos , senão quando exibir a numeração nas páginas internas, elas podem aparecer com cores diferentes.

Salve as modificações e vamos passar a segunda parte da instalação, que é adicionar o JavaScript.
Vá até Layout >> Editar HTML , não marque o “Expandir modelos de widgets” e localize a tag (ou similar):

<b:section class='main' id='main' showaddelement='yes'><b:widget id='Blog1' locked='true' title='Postagens no blog' type='blog'></b:section>

...(restante do código)...

</div>

Cole o código abaixo entre </b:section> e </div>:

<script type="text/javascript">

function showpageCount(json) {var thisUrl = location.href;var htmlMap = new Array();var isFirstPage = thisUrl.substring(thisUrl.length-5,thisUrl.length)==".com/";var isLablePage = thisUrl.indexOf("/search/label/")!=-1;var isPage = thisUrl.indexOf("/search?updated")!=-1;var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;var thisNum = 1;var postNum=1;var itemCount = 0;var fFlag = 0;var eFlag = 0;var html= '';var upPageHtml ='';var downPageHtml ='';

var pageCount = 5;var displayPageNum = 5;var upPageWord = 'Previous';var downPageWord = 'Next';

var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';

for(var i=0, post; post = json.feed.entry[i]; i++) {var timestamp = post.published.$t.substr(0,10);var title = post.title.$t;if(isLablePage){if(title!=''){if(post.category){for(var c=0, post_category; post_category = post.category[c]; c++) {if(encodeURIComponent(post_category.term)==thisLable){if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){if(thisUrl.indexOf(timestamp)!=-1 ){thisNum = postNum;}

postNum++;htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;}}}}//end if(post.category){

itemCount++;}

}else{if(title!=''){if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){if(thisUrl.indexOf(timestamp)!=-1 ){thisNum = postNum;}

if(title!='') postNum++;htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;}}itemCount++;}}

for(var p =0;p< htmlMap.length;p++){if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){if(fFlag ==0 && p == thisNum-2){if(thisNum==2){if(isLablePage){upPageHtml = labelHtml + upPageWord +'</a></span>';}else{upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';}}else{upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';}

fFlag++;}

if(p==(thisNum-1)){html += '<span class="showpagePoint">'+thisNum+'</span>';}else{if(p==0){if(isLablePage){html = labelHtml+'1</a></span>';}else{html += '<span class="showpageNum"><a href="/">1</a></span>';}}else{html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +'</a></span>';}}

if(eFlag ==0 && p == thisNum){downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';eFlag++;}}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){}//end for(var p =0;p< htmlMap.length;p++){

if(thisNum>1){if(!isLablePage){html = ''+upPageHtml+' '+html +' ';}else{html = ''+upPageHtml+' '+html +' ';}}

html = '<div class="showpageArea"><span  class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;

if(thisNum<(postNum-1)){html += downPageHtml;

}

if(postNum==1) postNum++;html += '</div>';

if(isPage || isFirstPage || isLablePage){var pageArea = document.getElementsByName("pageArea");var blogPager = document.getElementById("blog-pager");

if(postNum <= 2){html ='';}

for(var p =0;p< pageArea.length;p++){pageArea[p].innerHTML = html;}

if(pageArea&&pageArea.length>0){html ='';}

if(blogPager){blogPager.innerHTML = html;}}

}</script>

<script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999"; type="text/javascript"></script>

Agora vamos configurar a contagem de páginas e posts.(parte destacada em negrito no código)
var pageCount = 5; → aqui define o número de postagens que irá aparecer em cada pagina, e deve ser o mesmo número de postagens que você definiu em quantidades de post.
var displayPageNum = 5; → aqui define a quantidade de links para outras paginas que serão exibidas(Ex:1,2,3,4,5).

Salve as modificações.
Você só conseguirá visualizar as páginas numeradas, depois de salvar as modificações. Não é possivel visualizar o resultado somente na pre-visualização.

Uma Dica Importante:
Se você possui um Domínio Personalizado você precisa alterar o “. Com” localizado no trecho:
var isFirstPage = thisUrl.substring(thisUrl.length-5,thisUrl.length)==” .com/”;
Se você possui dominio do blogspot.com, não altere nada!

Este código foi modificado e traduzido a partir do publicado no Blogger Buster em inglês.

Leia também:

• Colocar Barra de Rolagem no blog
• Exibir Twitter Trackbacks no seu Blog
• Box Flutuante Assinar Feed via Email
• Códigos para Bloquear conteúdo no Blog
• Código para Proteger seus artigos de cópias

Vanessa

Vanessa é blogueira desde 2009, e 'aspirante' a web design nas horas vagas. Autodidata, viciada em internet, adoradora de blogs, seus códigos e templates, apaixonada por programas gráficos, tecnologia e web design,e fascinada pelo estilo gótico. Leia Mais sobre a autora »

Vanessa já escreveu 341 posts.