Páginas Numeradas no Blogger com 8 Estilos CSS para Você Escolher

CLASSIFICAÇÃO DO TUTORIAL
INTERMEDIÁRIO

Em 2009 publiquei um artigo que ensinava a colocar paginação no blogger. Sempre achei este hack um pouco difícil e às vezes ele dava uns erros.

Pretendo ensinar 2 novos hacks de páginas numeradas no blogger aqui no TPV

Este que vou ensinar agora é muito mais fácil e simples que o de 2009 e tem a opção de colocar estilos diferentes para a páginas numeradas. → Junto com este hack teremos também 8 estilos CSS das páginas numeradas para você escolher.

Numerar as páginas do seu blog é um recurso muito útil, porque facilita a navegação em seu blog. (Usabilidade)
Veja algumas Vantagens das Páginas Numeradas que listei no post de 2009 e que não podiam faltar aqui:
» O leitor pode navegar nas páginas de posts do seu blog e voltar quando quiser naquela que o chamou a atenção;
» Melhor organização do seu blog;
» Design simples e bonito sem ocupar muito espaço. 

Uma diferença que este hack tem em relação ao próximo artigo de páginas numeradas é que este tem a opção do link da última (last) e primeira (first) página, enquanto o outro não possui esta opção.

Não Se Esqueça: » Essas configurações demandam algum conhecimento em códigos HTML e CSS. Portanto: ♥ Sempre tente antes num blogue de testes. ♥ Salve o seu template antes de começar, clicando em: Fazer backup/Restaurar ♥ Leia o tutorial até o fim e tenha certeza de ter entendido.

Como colocar Páginas Numeradas no Blogger

1- Encontre a Linha:

<b:includable id='mobile-index-post' var='post'>

2- Cole este código antes da linha acima:

<b:includable id='page-navi'>
<div class='pagenavi'>
<script type='text/javascript'>
var pageNaviConf = {
perPage: 5,
numPages: 5,
firstText: &quot;First&quot;,
lastText: &quot;Last&quot;,
nextText: &quot;&#187;&quot;,
prevText: &quot;&#171;&quot;
}
</script>
<script type='text/javascript'> 
//<![CDATA[ 
/*

 * Awesome Blogger Page Navigation by Onlinetrick *
 * Rev 248 on May 7, 2010 *
 * Source at http://code.google.com/p/rilwis/source/browse/trunk/blogger *

*/


function pageNavi(o){
 var m=location.href,
  l=m.indexOf("/search/label/")!=-1,
  a=l?m.substr(m.indexOf("/search/label/")+14,m.length):"";
  
 a=a.indexOf("?")!=-1?a.substr(0,a.indexOf("?")):a;
 
 var g=l?"/search/label/"+a+"?updated-max=":"/search?updated-max=",
  k=o.feed.entry.length,
  e=Math.ceil(k/pageNaviConf.perPage);
 
 if(e<=1){
  return
 }
 var n=1,
  h=[""];
 l?h.push("/search/label/"+a+"?max-results="+pageNaviConf.perPage):h.push("/?max-results="+pageNaviConf.perPage);
 
 for(var d=2;d<=e;d++){
  var c=(d-1)*pageNaviConf.perPage-1,
   b=o.feed.entry[c].published.$t,
   f=b.substring(0,19)+b.substring(23,29);
   
  f=encodeURIComponent(f);
  
  if(m.indexOf(f)!=-1){
   n=d
  }
  
  h.push(g+f+"&max-results="+pageNaviConf.perPage)
 }
 
 pageNavi.show(h,n,e)
}

pageNavi.show=function(f,e,a){
 var d=Math.floor((pageNaviConf.numPages-1)/2),
  g=pageNaviConf.numPages-1-d,
  c=e-d;
 if(c<=0){
  c=1
 }
 endPage=e+g;
 if((endPage-c)<pageNaviConf.numPages){
  endPage=c+pageNaviConf.numPages-1
 }
 if(endPage>a){
  endPage=a;
  c=a-pageNaviConf.numPages+1
 }
 if(c<=0){
  c=1
 }
 
 var b='<span class="pages">Page '+e+' of '+a+"</span> ";
 
 if(c>1){
  b+='<a href="'+f[1]+'">'+pageNaviConf.firstText+"</a>"
 }
 if(e>1){
  b+='<a href="'+f[e-1]+'">'+pageNaviConf.prevText+"</a>"
 }
 for(i=c;i<=endPage;++i){
  if(i==e){
   b+='<span class="current">'+i+"</span>"
   }else{
   b+='<a href="'+f[i]+'">'+i+"</a>"
  }
 }
 if(e<a){
  b+='<a href="'+f[e+1]+'">'+pageNaviConf.nextText+"</a>"
 }
 if(endPage<a){
  b+='<a href="'+f[a]+'">'+pageNaviConf.lastText+"</a>"
 }
 
 document.write(b)
};
 
(function(){var b=location.href;if(b.indexOf("?q=")!=-1||b.indexOf(".html")!=-1){return}var d=b.indexOf("/search/label/")+14;if(d!=13){var c=b.indexOf("?"),a=(c==-1)?b.substring(d):b.substring(d,c);document.write('<script type="text/javascript" src="/feeds/posts/summary/-/'+a+'?alt=json-in-script&callback=pageNavi&max-results=99999"><\/script>')}else{document.write('<script type="text/javascript" src="/feeds/posts/summary?alt=json-in-script&callback=pageNavi&max-results=99999"><\/script>')}})();
//]]> 
</script>
<div class='clear'/>
</div>
</b:includable>

Configure o código acima:

»perPage: 5, → Significa quantos posts serão exibidos por página de navegação.
►Deve ser igual ao número de postagens na página principal que você configurou quando criou seu blog.
Confira em Configurações » Postagens e comentários » Mostrar no máximo X postagens na página principal.» Clique em Salvar configurações
»numPages: 5, →São quantos números de páginas serão exibidos na página de navegação.
»firstText: "First", →Altere First, se quiser, por Primeira página;
»lastText: "Last", →Altere Last, se quiser, por Última página;
»nextText: "»", →» Corresponde ao símbolo » você pode alterá-lo por outro símbolo;
»prevText: "«" →« Corresponde ao símbolo « você pode alterá-lo por outro símbolo.

Para ajudar »Leia:Símbolos - Atalhos do Teclado

OBSERVAÇÃO IMPORTANTE: (Respondendo à comentários e dúvidas.)

Se seu blog possui muitos posts e você limitar a quantidade de posts (perPage) e números de páginas (numPages). Muito possivelmente quando você clicar em Last não será direcionado à real última página do seu blog onde se encontra o seu primeiro post.
Este problema também acontecia aqui no TPV. Tentei colocar perPage: 10 e numPages: 10 e deu certo. Consegui chegar até a última página real do blog.
Assim. Você deve ir testando para ver quais as numerações que irão dar certo ao seu blog.

3- Agora encontre a Linha:

<b:include name='nextprev'/>

4- Selecione a linha acima▲ e Substitua esta linha por este código abaixo ▼:

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<b:include name='page-navi'/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<b:include name='page-navi'/>
</b:if>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include name='nextprev'/>
</b:if>
</b:if>

♦ Clique em Salvar modelo.

Observação Importante:

Assim você aplicar este hack acesse um post.
Se no final do seu post os links para [Previous Post ou Postagem mais Recente], [Next Post ou Postagem mais Antiga] e [Home ou Início] estiverem nesta ordem respectivamente.
A solução que encontrei para que o link [Início ou Home] fique no meio, entre os links [Previous] e [Next post] foi esta:

Encontre a linha:

<b:includable id='nextprev'>

»Expanda este bloco de códigos. (clique em ► no canto esquerdo do seu editor de HTML
Nele encontre a linha:

<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

Se esta linha estiver entre uma condicional b:if como exemplifiquei abaixo copie as 3 linhas e mude de lugar.

    <b:if cond='data:blog.homepageUrl != data:blog.url'>
      <a class='home-link' expr:href='data:blog.homepageUrl'>Home</a>
    </b:if>

Recorte-a e cole onde está mostrando a imagem abaixo.

Entre <b:if cond='data:newerPageUrl'> e <b:if cond='data:olderPageUrl'>

Configurando o Estilo das Páginas Numeradas no Blogger

Copie o código CSS do estilo que preferir e cole acima da tag ]]></b:skin>

1º Estilo:

/*---Page-Navigation--- */
#blog-pager,
.pagenavi {padding: 6px 10px;
    clear: both;
    text-align: center;
    margin: 30px auto 10px;
}
#blog-pager a,
.pagenavi span,
.pagenavi a {
    text-decoration: none;
    color: #333;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
    background-color: #F8F8F8;
    filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#fffcfcfc,EndColorStr=#fff8f8f8);
    background-image: -moz-linear-gradient(top,#FCFCFC 0,#F8F8F8 100%);
    background-image: -ms-linear-gradient(top,#FCFCFC 0,#F8F8F8 100%);
    background-image: -o-linear-gradient(top,#FCFCFC 0,#F8F8F8 100%);
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#FCFCFC),color-stop(100%,#F8F8F8));
    background-image: -webkit-linear-gradient(top,#FCFCFC 0,#F8F8F8 100%);
    background-image: linear-gradient(to bottom,#FCFCFC 0,#F8F8F8 100%);
    padding: 5px 10px;
    border: 1px solid lightGrey;
    font-weight: bold;
    font-size: 12px;
    vertical-align: middle;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    margin: 2px 2px;
    -webkit-transition: .0s ease-in!important;
    -moz-transition: .0s ease-in!important;
    -ms-transition: .0s ease-in!important;
    -o-transition: .0s ease-in!important;
    transition: .0s ease-in!important;
}
#blog-pager a:hover,
.pagenavi a:hover {
    border-color: #C6C6C6;
    filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#fff8f8f8,EndColorStr=#ffeeeeee);
    background-image: -moz-linear-gradient(top,#F8F8F8 0,#EEE 100%);
    background-image: -ms-linear-gradient(top,#F8F8F8 0,#EEE 100%);
    background-image: -o-linear-gradient(top,#F8F8F8 0,#EEE 100%);
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#F8F8F8),color-stop(100%,#EEE));
    background-image: -webkit-linear-gradient(top,#F8F8F8 0,#EEE 100%);
    background-image: linear-gradient(to bottom,#F8F8F8 0,#EEE 100%);
}
#blog-pager-older-link,
#blog-pager-newer-link { float: none }
.pagenavi .current {
    border-color: #C6C6C6;
    background-color: #E9E9E9;
    background-image: none;
    -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);
    -ms-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);
}
.pagenavi a:active {
    border-color: #C6C6C6;
    background-color: #E9E9E9;
    background-image: none;
    -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);
    -ms-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);
}

♦ Clique em Salvar modelo.

2º Estilo

/*---Page-Navigation--- */
#Page-Navigation { margin-top: 3em !important }
.pagenavi {padding: 8px 10px;
    clear: both;
    text-align: center;
    margin: 30px auto 10px;
    font-size: 13px !important;
    font-weight: bold;
}
.pagenavi span,
.pagenavi a {
    margin-right: 5px !important;
    padding: 7px 10px 7px 10px !important;
    color: #1E598E !important;
    background: #F6F6F6 !important;
    border: 1px solid #C8D5E0 !important;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
    text-transform: none;
    text-decoration: none;
    -webkit-transition: all .2s ease-in;
    -moz-transition: all .2s ease-in;
    -o-transition: all .2s ease-in;
    transition: all .2s ease-in;
}
.pagenavi a:visited { color: #1E598E !important }
.pagenavi a:hover {
    color: #1E598E !important;
    border-color: #C8D5E0 !important;
    background: #C8D5E0 !important;
}
.pagenavi .current {
    padding: 7px 10px 7px 10px !important;
    border: 1px solid #C8D5E0 !important;
    color: #1E598E !important;
    margin-right: 3px !important;
    border-color: #C8D5E0 !important;
    background: #ffffff !important;
    border-radius: 5px;
}
.pagenavi .pages,
.pagenavi .current { font-weight: bold }
.pagenavi .pages {
    border: 1px solid #C8D5E0 !important;
    color: #1E598E !important;
    background: #F6F6F6 !important;
}
#blog-pager-newer-link { float: left }
#blog-pager-newer-link a {
    padding: 7px 10px 7px 10px !important;
    color: #1E598E !important;
    background: #F6F6F6 !important;
    border: 1px solid #C8D5E0 !important;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
    text-transform: none;
    text-decoration: none;
    font-size: 1.4em !important;
    margin-right: 3px !important;
    text-decoration: none !important;
}
#blog-pager-newer-link a:hover {
    padding: 7px 10px 7px 10px !important;
    color: #1E598E !important;
    border-color: #C8D5E0 !important;
    background: #C8D5E0 !important;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
}
#blog-pager-older-link { float: right }
#blog-pager-older-link a {
    padding: 7px 10px 7px 10px !important;
    color: #1E598E !important;
    background: #F6F6F6 !important;
    border: 1px solid #C8D5E0 !important;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
    text-transform: none;
    text-decoration: none;
    font-size: 1.4em !important;
    margin-right: 3px !important;
    text-decoration: none !important;
}
#blog-pager-older-link a:hover {
    padding: 7px 10px 7px 10px !important;
    color: #1E598E !important;
    border-color: #C8D5E0 !important;
    background: #C8D5E0 !important;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
}
#blog-pager {
    text-align: center;
    float: center;
    margin-left: 214px !important;
}
#blog-pager a {
    padding: 7px 10px 7px 10px !important;
    color: #1E598E !important;
    background: #F6F6F6 !important;
    border: 1px solid #C8D5E0 !important;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
    text-transform: none;
    text-decoration: none;
    font-size: 1.4em !important;
    margin-right: 3px !important;
    text-decoration: none !important;
}
#blog-pager a:hover {
    padding: 7px 10px 7px 10px !important;
    color: #1E598E !important;
    border-color: #C8D5E0 !important;
    background: #C8D5E0 !important;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
}

♦ Clique em Salvar modelo.

3º Estilo

/*---Page-Navigation--- */
#blog-pager, .pagenavi{
    padding: 6px 10px;
    clear: both;
    text-align: center;
    margin: 20px auto 10px;
}
#blog-pager a,
.pagenavi span,
.pagenavi a {
    margin: 0 6px;
    display: inline-block;
    font-weight: 400;
    line-height: 1.2em;
    text-decoration: none;
    background-color: #295874;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    color: #FFFFFF;
    padding: 5px 8px;
}
#blog-pager a:hover,
.pagenavi a:hover,
.pagenavi span.current{
    background-color: #3180AE;
    text-align: center;
}
#blog-pager-older-link,
#blog-pager-newer-link { float: none }

♦ Clique em Salvar modelo.

4º Estilo

Azul

/*---Page-Navigation--- */
#blog-pager, .pagenavi {
     clear: both;
     text-align: center;
     margin: 30px auto 10px;
}
#blog-pager a, .pagenavi span, .pagenavi a {
border: 1px solid #3d8bf2;/*Cor da Borda Azul*/                
padding: 5px 10px;                 
text-decoration: none;                 
font-family: arial;                 
color:#fff;                 
margin: 2px;                 
background-image: url('http://onlinetrick-ot.googlecode.com/svn/image/menubg1.PNG');/*Imagem de Fundo*/
background-position: left;            
-webkit-transition: all 0.7s ease-in-out;               
-moz-transition: all 0.7s ease-in-out;                 
-o-transition: all 0.7s ease-in-out;  
}
#blog-pager a:hover, .pagenavi a:hover {
background-position:right; 
}
#blog-pager-older-link, #blog-pager-newer-link {
     float: none;
}
.pagenavi .current {
background-position:right; 
}

Rosa

/*---Page-Navigation---*/
#blog-pager, .pagenavi { padding: 5px 10px;
     clear: both;
     text-align: center;
     margin: 30px auto 10px;
}
#blog-pager a, .pagenavi span, .pagenavi a {
border: 1px solid #D2136F;/*Cor da Borda Rosa*/                
padding: 5px 10px;                 
text-decoration: none;                 
font-family: arial;                 
color:#fff;                 
margin: 2px;                 
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi10dBPPfi_blIseLL-cWJNMOFs2OsQ1Cv8zrVpYFo6ls24M-5ZdKCZydeN5tfWabECxs5oq4wzZ0Yz8jgcwxrki764MRkGwS3xhSqG_a_yGCdIN041ECrNynaInEvj8UEwwohv4mQUwluq/s1600/menubg1.PNG');/*Imagem de Fundo*/
background-position: left;            
-webkit-transition: all 0.7s ease-in-out;               
-moz-transition: all 0.7s ease-in-out;                 
-o-transition: all 0.7s ease-in-out;  
}
#blog-pager a:hover, .pagenavi a:hover {
background-position:right; 
}
#blog-pager-older-link, #blog-pager-newer-link {
     float: none;
}
.pagenavi .current {
background-position:right; 
}

Note que mudei apenas a cor da borda e a imagem de fundo.
Você pode fazer com a cor que quiser.

♦ Clique em Salvar modelo.

5º Estilo

/*---Page-Navigation--- */
#blog-pager, .pagenavi{
    padding: 6px 10px;
    clear: both;
    text-align: center;
    margin: 20px auto 10px;
}
.pagenavi span.current{color: #999999;}
#blog-pager a,.pagenavi a, .pagenavi span{background: #FFFFFF;border-radius: 30px 30px 30px 30px;box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);color: #AE2525;margin: 0 6px;display: inline-block; font-weight: 400;line-height: 1.2em;text-decoration: none;padding: 10px 12px;}
#blog-pager a:hover, .pagenavi a:hover {background: #eaeaea; color:#EA1C5D; border:1px none #ccc; -webkit-transition-duration: .90s;}
#blog-pager-older-link,
#blog-pager-newer-link { float: none }

♦ Clique em Salvar modelo.

6º Estilo

/*---Page-Navigation--- */
.blog-pager, .pagenavi{
    padding: 6px 10px;
    clear: both;
    text-align: center;
    margin: 20px auto 10px;
}
.blog-pager a, .pagenavi a, .pagenavi span{background: #E3E2D9;border: 1px solid #CECCC1;color: #000;margin: 0 6px;display: inline-block; font-weight: 400;line-height: 1.2em;text-decoration: none;padding: 4px 8px;}
.blog-pager a:hover,.pagenavi a:hover, .pagenavi span.current {background-color: #CA4C3F;border: 1px solid #B05142;color: #FFFFFF;}
.blog-pager-older-link, .home-link,
.blog-pager-newer-link { float:none;}

♦ Clique em Salvar modelo.

7º Estilo

/*---Page-Navigation--- */
.blog-pager, .pagenavi {
  padding: 8px;
  clear: both;
  text-align: center;
  margin: 20px auto 10px;
}
.blog-pager a, .pagenavi a, .pagenavi span {
 padding: 5px; margin-right: 10px;
 font-size: 15px; color: #03719c; text-decoration: none;
 border: 3px solid #ccc; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -webkit-transition-duration: .90s;
 }
.blog-pager a:hover, .pagenavi a:hover, .pagenavi span.current {
 background: #03719c;
 color: #fff;
 border: 3px solid #AFAFAF;
 }
.pagenavi span.current { font-weight: bold; }
.blog-pager-older-link, .home-link,
.blog-pager-newer-link { float:none;}

♦ Clique em Salvar modelo.

8º Estilo

/*---Page-Navigation--- */
.pagenavi .pages { display: none;}
#blog-pager, .pagenavi {padding: 8px 10px;
     clear: both;
     text-align: center;
     margin: 30px auto 15px;
}
#blog-pager a, .pagenavi span, .pagenavi a {
padding: 5px 10px;
text-decoration: none;
font-family: arial;
color: white;
margin: 2px;
background: black;
background-position: bottom;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
border-radius: 30px;
font-size: 20px;
}
#blog-pager a:hover, .pagenavi a:hover {
background: orange;
}
#blog-pager-older-link, #blog-pager-newer-link {
     float: none;}
.pagenavi .current {
background: orange;} 

♦ Clique em Salvar modelo.

Veja que neste estilo não aparece a opção [Page 1 of 4] como na imagem abaixo.

Para que apareça você deve apagar a linha em negrito neste Estilo 8:

.pagenavi .pages { display: none;}

E se você quiser que não apareça o [Page 1 of 4] nos outros estilos acrescente esta linha no código CSS dos mesmos.


Fontes:

♦ Tradução e Adaptação do Tutorial: 5 Different Styles of Page Navigation For Blogger V2 Autorizado pelo Autor
♦ Adaptação dos estilos CSS deste tutorial: 5 CSS Styles for WP-Pagenavi Plugin