Colocar numeração nas paginas do blog

Para colocar numeração nas paginas do blog parecido com a numeração das paginas de busca do Google ou Yahoo que no final da pagina mostra em qual página você está e quantas têm antes e depois dela, usamos um código em duas partes.

Primeiro vamos colocar a formatação em CSS, isso controla a aparência da numeração, entre na pagina editar HTML e coloque isso junto com o restante dos estilos, sugerimos colocar logo depois do body, assim ficará mais fácil localizar para futuras alterações.

Veja aqui uma atualização deste código para mostrar a Numeração nas Páginas do Blogger, publicado em 28/01/2011

Entre na pagina editar HTML e cole o trecho abaixo:

.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;

}

Depois você pode personalizar facilmente apenas trocado as cores das letras, fundo e bordas, onde está:

border: 1px solid #ccc; é a cor e estilo da borda

background-color:#ccc; é a cor de fundo

Isso aparece varias vezes no código então sugerimos que modifique todos da mesma maneira senão quando exibir a numeração que não seja na primeira pagina, elas podem aparecer de cores diferentes, mas isso é uma questão de gosto, portanto depois que instalar a numeração façam os testes e deixem com as cores que gostarem mais.

Agora clique para salvar, não adianta visualizar o blog, pois ainda não verá nenhum resultado, então vamos colocar o código que faz aparecer a numeração, procure agora por <b:widget id='Blog1' locked='tr ...

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

&lt;script type=&quot;text/javascript&quot;&gt;

function showpageCount(json) {

var thisUrl = location.href;

var htmlMap = new Array();

var isFirstPage = thisUrl.substring(thisUrl.length-5,thisUrl.length)==&quot;.com/&quot;;

var isLablePage = thisUrl.indexOf(&quot;/search/label/&quot;)!=-1;

var isPage = thisUrl.indexOf(&quot;/search?updated&quot;)!=-1;

var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf(&quot;/search/label/&quot;)+14,thisUrl.length) : &quot;&quot;;

thisLable = thisLable.indexOf(&quot;?&quot;)!=-1 ? thisLable.substr(0,thisLable.indexOf(&quot;?&quot;)) : thisLable;

var thisNum = 1;

var postNum=1;

var itemCount = 0;

var fFlag = 0;

var eFlag = 0;

var html= &#39;&#39;;

var upPageHtml =&#39;&#39;;

var downPageHtml =&#39;&#39;;

var pageCount = 5;

var displayPageNum = 5;

var upPageWord = &#39;Anterior&#39;;

var downPageWord = &#39;Próxima&#39;;

var labelHtml = &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;/search/label/&#39;+thisLable+&#39;?&amp;max-results=&#39;+pageCount+&#39;&quot;&gt;&#39;;

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!=&#39;&#39;){

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] = &#39;/search/label/&#39;+thisLable+&#39;?updated-max=&#39;+timestamp+&#39;T00%3A00%3A00%2B08%3A00&amp;max-results=&#39;+pageCount;

}

}

}

}//end if(post.category){

itemCount++;

}

}else{

if(title!=&#39;&#39;){

if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){

if(thisUrl.indexOf(timestamp)!=-1 ){

thisNum = postNum;

}

if(title!=&#39;&#39;) postNum++;

htmlMap[htmlMap.length] = &#39;/search?updated-max=&#39;+timestamp+&#39;T00%3A00%3A00%2B08%3A00&amp;max-results=&#39;+pageCount;

}

}

itemCount++;

}

}

for(var p =0;p&lt; htmlMap.length;p++){

if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){

if(fFlag ==0 &amp;&amp; p == thisNum-2){

if(thisNum==2){

if(isLablePage){

upPageHtml = labelHtml + upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;

}else{

upPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;/&quot;&gt;&#39;+ upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;

}

}else{

upPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;

}

fFlag++;

}

if(p==(thisNum-1)){

html += &#39;&lt;span class=&quot;showpagePoint&quot;&gt;&#39;+thisNum+&#39;&lt;/span&gt;&#39;;

}else{

if(p==0){

if(isLablePage){

html = labelHtml+&#39;1&lt;/a&gt;&lt;/span&gt;&#39;;

}else{

html += &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;/&quot;&gt;1&lt;/a&gt;&lt;/span&gt;&#39;;

}

}else{

html += &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ (p+1) +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;

}

}

if(eFlag ==0 &amp;&amp; p == thisNum){

downPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt; &lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ downPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;

eFlag++;

}

}//end if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){

}//end for(var p =0;p&lt; htmlMap.length;p++){

if(thisNum&gt;1){

if(!isLablePage){

html = &#39;&#39;+upPageHtml+&#39; &#39;+html +&#39; &#39;;

}else{

html = &#39;&#39;+upPageHtml+&#39; &#39;+html +&#39; &#39;;

}

}

html = &#39;&lt;div class=&quot;showpageArea&quot;&gt;&lt;span style=&quot;COLOR: #000;&quot; class=&quot;showpageOf&quot;&gt; &#39;+(postNum-1)+&#39; páginas&lt;/span&gt;&#39;+html;

if(thisNum&lt;(postNum-1)){

html += downPageHtml;

}

if(postNum==1) postNum++;

html += &#39;&lt;/div&gt;&#39;;

if(isPage || isFirstPage || isLablePage){

var pageArea = document.getElementsByName(&quot;pageArea&quot;);

var blogPager = document.getElementById(&quot;blog-pager&quot;);

if(postNum &lt;= 2){

html =&#39;&#39;;

}

for(var p =0;p&lt; pageArea.length;p++){

pageArea[p].innerHTML = html;

}

if(pageArea&amp;&amp;pageArea.length&gt;0){

html =&#39;&#39;;

}

if(blogPager){

blogPager.innerHTML = html;

}

}

}

&lt;/script&gt;

&lt;script src=&quot;/feeds/posts/summary?alt=json-in-script&amp;callback=showpageCount&amp;max-results=99999&quot;; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;

Então clique para salvar, não adianta tentar visualizar o blog, por que o código não funciona na visualização. Provavelmente no final da pagina do seu blog apareceu algo assim:

Agora já está tudo pronto, mas podemos modificar algumas coisas, veja esse trecho do código:

var pageCount = 5; aqui devemos usar o mesmo numero de postagens que definimos para aparecer em cada pagina.

var displayPageNum = 5; neste o numero 5 é a quantidade links para outras paginas que serão mostradas( 1-2-3-4-5), portanto use o numero que achar melhor.

var upPageWord = 'Anterior';

var downPageWord = 'Próxima';

Aqui podemos trocar a palavra anterior e próxima que aparecem no blog. Mas cuidado ao fazer alteração, pois se apagar qualquer outro sinal o código não funcionará.

Veja no blog Meu Jornal esse código em funcionamento. Encontramos e fizemos algumas modificações nesse código a partir do publicado no Blogger Buster em inglês.

Numeração nas Páginas do Blogger - Código Atualizado

Veja o código atualizado para colocar numeração nas paginas do blogspot, anteriormente já publicamos um código Colocar numeração nas paginas do blog mas ele apresentou alguns erros, então encontramos essa versão mais recente deste hack que cria numeração de paginas no blog. Não é muito difícil de instalar apenas precisa de alguns cuidados para evitar os erros nos códigos na hora de editar o HTML do seu blog, veja aqui Porque os códigos não funcionam no blog.

Entre na pagina editar HTML, clique para expandir o modelo, procure por ]]></b:skin> e coloque esse código antes dele:

.showpageNum a {
padding: 3px 8px;
margin:0 4px;
text-decoration: none;
border:1px solid #999;
-webkit-border-radius:3px;-moz-border-radius:3px;
background: #ddd;
}

.showpageOf {
margin:0 8px 0 0;
}
.showpageNum a:hover {
border:1px solid #888;
background: #ccc;
}

.showpagePoint {
color:#fff;
text-shadow:0 1px 2px #333;
padding: 3px 8px;
margin: 2px;
font-weight: 700;
-webkit-border-radius:3px;-moz-border-radius:3px;
border:1px solid #999;
background: #666;
text-decoration: none;
}

Isso é a formatação dos links (botões) dos números das paginas, para modificar o estilo dos botões veja aqui:
Como fazer e colocar botões no blog
Como Formatar o Texto do Blog

Agora localize a linha </body> e coloque esse javascript antes dele:

&lt;script type='text/javascript'&gt;
var home_page="/";
var urlactivepage=location.href;
var postperpage=7;
var numshowpage=4;
var upPageWord ='Voltar';
var downPageWord ='Próxima';
&lt;/script&gt;
&lt;script src='http://www.yourjavascript.com/19425042120/pagenav.js' type='text/javascript'&gt;&lt;/script&gt;

Essa linha var postperpage=7; define o numero de postagens por pagina

E para terminar procure por 'data:label.url' no código html inteiro do seu blog por e substitua todos eles por:

'data:label.url + &quot;?&amp;max-results=7&quot;'

Use o ctrl+F para localizar esses trechos de códigos no seu blog, em caso de duvidas veja Onde colocar os códigos no blog e cuidado para não apagar nada por engano, pois se faltar algum caractere ou deixar algo a mais o código não funciona.