Colocar numeração nas paginas do blog
Autor: Mino BonChance consultor imobiliário | Publicado: 2010-09-09T06:30:00-07:00

 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. 



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 &lt;b:widget id='Blog1' locked='tr ...



Coloque o código abaixo entre &lt;/b:section&gt; e &lt;/div&gt;:

&amp;lt;script type=&amp;quot;text/javascript&amp;quot;&amp;gt;
function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-5,thisUrl.length)==&amp;quot;.com/&amp;quot;;
var isLablePage = thisUrl.indexOf(&amp;quot;/search/label/&amp;quot;)!=-1;
var isPage = thisUrl.indexOf(&amp;quot;/search?updated&amp;quot;)!=-1;
var  thisLable = isLablePage ?  thisUrl.substr(thisUrl.indexOf(&amp;quot;/search/label/&amp;quot;)+14,thisUrl.length)  : &amp;quot;&amp;quot;;
thisLable =  thisLable.indexOf(&amp;quot;?&amp;quot;)!=-1 ?  thisLable.substr(0,thisLable.indexOf(&amp;quot;?&amp;quot;)) :  thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= &amp;#39;&amp;#39;;
var upPageHtml =&amp;#39;&amp;#39;;
var downPageHtml =&amp;#39;&amp;#39;;

var pageCount = 5;
var displayPageNum = 5;
var upPageWord = &amp;#39;Anterior&amp;#39;;
var downPageWord = &amp;#39;Próxima&amp;#39;;
var  labelHtml = &amp;#39;&amp;lt;span  class=&amp;quot;showpageNum&amp;quot;&amp;gt;&amp;lt;a  href=&amp;quot;/search/label/&amp;#39;+thisLable+&amp;#39;?&amp;amp;max-results=&amp;#39;+pageCount+&amp;#39;&amp;quot;&amp;gt;&amp;#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!=&amp;#39;&amp;#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]  =  &amp;#39;/search/label/&amp;#39;+thisLable+&amp;#39;?updated-max=&amp;#39;+timestamp+&amp;#39;T00%3A00%3A00%2B08%3A00&amp;amp;max-results=&amp;#39;+pageCount;
}
}
}
}//end if(post.category){
itemCount++;
}
}else{
if(title!=&amp;#39;&amp;#39;){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}
if(title!=&amp;#39;&amp;#39;) postNum++;
htmlMap[htmlMap.length]  =  &amp;#39;/search?updated-max=&amp;#39;+timestamp+&amp;#39;T00%3A00%3A00%2B08%3A00&amp;amp;max-results=&amp;#39;+pageCount;
}
}
itemCount++;
}
}
for(var p =0;p&amp;lt; htmlMap.length;p++){
if(p&amp;gt;=(thisNum-displayPageNum-1) &amp;amp;&amp;amp; p&amp;lt;(thisNum+displayPageNum)){
if(fFlag ==0 &amp;amp;&amp;amp; p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +&amp;#39;&amp;lt;/a&amp;gt;&amp;lt;/span&amp;gt;&amp;#39;;
}else{
upPageHtml  = &amp;#39;&amp;lt;span  class=&amp;quot;showpage&amp;quot;&amp;gt;&amp;lt;a  href=&amp;quot;/&amp;quot;&amp;gt;&amp;#39;+ upPageWord  +&amp;#39;&amp;lt;/a&amp;gt;&amp;lt;/span&amp;gt;&amp;#39;;
}
}else{
upPageHtml  = &amp;#39;&amp;lt;span  class=&amp;quot;showpage&amp;quot;&amp;gt;&amp;lt;a  href=&amp;quot;&amp;#39;+htmlMap[p]+&amp;#39;&amp;quot;&amp;gt;&amp;#39;+  upPageWord +&amp;#39;&amp;lt;/a&amp;gt;&amp;lt;/span&amp;gt;&amp;#39;;
}
fFlag++;
}
if(p==(thisNum-1)){
html  += &amp;#39;&amp;lt;span  class=&amp;quot;showpagePoint&amp;quot;&amp;gt;&amp;#39;+thisNum+&amp;#39;&amp;lt;/span&amp;gt;&amp;#39;;
}else{
if(p==0){
if(isLablePage){
html = labelHtml+&amp;#39;1&amp;lt;/a&amp;gt;&amp;lt;/span&amp;gt;&amp;#39;;
}else{
html  += &amp;#39;&amp;lt;span  class=&amp;quot;showpageNum&amp;quot;&amp;gt;&amp;lt;a  href=&amp;quot;/&amp;quot;&amp;gt;1&amp;lt;/a&amp;gt;&amp;lt;/span&amp;gt;&amp;#39;;
}
}else{
html  += &amp;#39;&amp;lt;span  class=&amp;quot;showpageNum&amp;quot;&amp;gt;&amp;lt;a  href=&amp;quot;&amp;#39;+htmlMap[p]+&amp;#39;&amp;quot;&amp;gt;&amp;#39;+  (p+1) +&amp;#39;&amp;lt;/a&amp;gt;&amp;lt;/span&amp;gt;&amp;#39;;
}
}
if(eFlag ==0 &amp;amp;&amp;amp; p == thisNum){
downPageHtml  = &amp;#39;&amp;lt;span class=&amp;quot;showpage&amp;quot;&amp;gt;  &amp;lt;a  href=&amp;quot;&amp;#39;+htmlMap[p]+&amp;#39;&amp;quot;&amp;gt;&amp;#39;+  downPageWord  +&amp;#39;&amp;lt;/a&amp;gt;&amp;lt;/span&amp;gt;&amp;#39;;
eFlag++;
}
}//end if(p&amp;gt;=(thisNum-displayPageNum-1) &amp;amp;&amp;amp; p&amp;lt;(thisNum+displayPageNum)){
}//end for(var p =0;p&amp;lt; htmlMap.length;p++){
if(thisNum&amp;gt;1){
if(!isLablePage){
html = &amp;#39;&amp;#39;+upPageHtml+&amp;#39; &amp;#39;+html +&amp;#39; &amp;#39;;
}else{
html = &amp;#39;&amp;#39;+upPageHtml+&amp;#39; &amp;#39;+html +&amp;#39; &amp;#39;;
}
}
html  = &amp;#39;&amp;lt;div  class=&amp;quot;showpageArea&amp;quot;&amp;gt;&amp;lt;span  style=&amp;quot;COLOR: #000;&amp;quot;  class=&amp;quot;showpageOf&amp;quot;&amp;gt;  &amp;#39;+(postNum-1)+&amp;#39;  páginas&amp;lt;/span&amp;gt;&amp;#39;+html;
if(thisNum&amp;lt;(postNum-1)){
html += downPageHtml;
}
if(postNum==1) postNum++;
html += &amp;#39;&amp;lt;/div&amp;gt;&amp;#39;;
if(isPage || isFirstPage || isLablePage){
var pageArea = document.getElementsByName(&amp;quot;pageArea&amp;quot;);
var blogPager = document.getElementById(&amp;quot;blog-pager&amp;quot;);
if(postNum &amp;lt;= 2){
html =&amp;#39;&amp;#39;;
}
for(var p =0;p&amp;lt; pageArea.length;p++){
pageArea[p].innerHTML = html;
}
if(pageArea&amp;amp;&amp;amp;pageArea.length&amp;gt;0){
html =&amp;#39;&amp;#39;;
}
if(blogPager){
blogPager.innerHTML = html;
}
}
}
&amp;lt;/script&amp;gt;
&amp;lt;script   src=&amp;quot;/feeds/posts/summary?alt=json-in-script&amp;amp;callback=showpageCount&amp;amp;max-results=99999&amp;quot;;  type=&amp;quot;text/javascript&amp;quot;&amp;gt;&amp;lt;/script&amp;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.

Veja também:

Personalizar títulos
Formatar texto
Código das cores
Colunas com alturas diferentes