» Códigos, Dicas, Templates, Tutoriais para deixar o seu blog do seu jeito!

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


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.
backup do template 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: &quot;First&quot;, →Altere First, se quiser, por Primeira página;
»lastText: &quot;Last&quot;, →Altere Last, se quiser, por Última página;
»nextText: &quot;&#187;&quot;, →&#187; Corresponde ao símbolo » você pode alterá-lo por outro símbolo;
»prevText: &quot;&#171;&quot; →&#171; 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('http://4.bp.blogspot.com/-qif9KRu_IBo/UfBrsXlprOI/AAAAAAAAADU/3U1HiFHE1Mw/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
Páginas Numeradas no Blogger com 8 Estilos CSS para Você Escolher Páginas Numeradas no Blogger com 8 Estilos CSS para Você Escolher Reviewed by Aurea R C on 7/28/2013 Rating: 5

59 comentários:

  1. me ajude por favor na nextprev interna quando clico em um poste não aparece os numeros sim os nomes fiz o que vc falo mudei o item de lugar mais continua o mesmo o que devo fazer preciso urgente.

    ResponderExcluir
    Respostas
    1. Digital,
      Quando você acessa o post em separado realmente aparecerá apenas os nomes Previous Home e Next posts.
      Os números aparecem apenas nas páginas principal, marcadores e arquivo.
      Mande qual o blog seu que deu este problema. Não vou publicar por causa do link, mas mande para eu tentar entender sua dúvida.
      Att,
      Áurea

      Excluir
    2. obrigado funcionou no meu blog perfeitamente

      Excluir
  2. Muito obrigado pelo tutorial. Fiz o teste e vi que ele não exibia algumas postagens da página mostrada, então apaguei todas e postei novamente sem repetição no título, e agora dá certinho até chegar na última página (as primeiras postagens). Das 5, só a primeira delas aparece. Poderia me ajudar sobre isso? Abraço.

    ResponderExcluir
  3. me ajude por favor no meu blog na pagina inicial não esta mostrando os botões com os números mais quando clico em alguma postagem aparece os botões de: pagina anterior, pagina inicial e próxima pagina. Me ajude Por favor o mais rápido possível OBg

    ResponderExcluir
  4. Aurea, eu to tentando ... Consegui, mas depois os numeros somem e só ficam os nomes : " Page 1 off 3 123>> ", já tentei refazer os códigos mas dá erro :(

    ResponderExcluir
  5. Amei o tutorial, usando o 2º modelo em um layout que estou fazendo. Deu certinho, ficou massa :D
    Darei os créditos ao seu blog :)

    Adolescente Nerd

    ResponderExcluir
  6. muito agradecido, foi de grande ajuda seu post.

    ResponderExcluir
  7. Olá Leitores do TPV,

    Desculpem não poder responder aos comentários onde houve algum erro do tutorial.
    Meu tempo é muito curto, mal consigo produzir conteúdo para o blog.
    No entanto testei este tutorial em vários blogs de demonstração e deu certo em todos, só por isso o publiquei.
    Vou procurar na internet algum tutorial mais fácil e simples para ensinar aqui. E espero que dê certo para quem não deu.
    Para os que conseguiram instalar o hack fico muito feliz por ter dado certo.
    Um abraço a todos.

    ResponderExcluir
  8. Parabéns - O legal é que é possível alterar a Css e deixar com a cara do seu blog. Só queria saber alterar o texto pages 30 of ...

    Se souber da uma ajuda. parabéns!

    ResponderExcluir
    Respostas
    1. Olá J Victor,
      Para isso você terá que acessar o código javascript do hack e alterar na linha: var b='<span class="pages">Page '+e+' of '+a+"</span> "; a palavra Page por Página
      Depois hospede onde preferir e use o seu link.

      Excluir
  9. Aurea, muito bom tutorial, só tenho uma dúvida. Como eu faço pra trocar por exemplo "Page 1 of 2", pra deixar "Página 1 de 2"? Obrigado.

    ResponderExcluir
    Respostas
    1. Olá Pedro Paulo,
      Para fazer isso você deverá baixar o código javascript (http://awesome-navigation.googlecode.com/files/onlinetrick.js) do hack e alterar esta linha: var b='<span class="pages">Page '+e+' of '+a+"</span> ";
      Salve e use o javascript no seu hack.
      Se não souber como siga as instruções deste post: http://www.templatesparavoce.com/2013/08/como-hospedar-javascript-no-google-drive.html

      Excluir
  10. ÓTIMO, ESTE CODIGO .pagenavi .pages { display: none;} SERVE PARA QUALQUER MODELO. SE QUISER TIRAR O NOME EM OUTRA LINGUA "PAGES" "OF" É SÓ COLOCAR ESTE CODIGO.pagenavi .pages { display: none;} ABAIXO DO TITULO DO JAVA/SCRIPIT FICANDO ASSIM /*---Page-Navigation--- */
    .pagenavi .pages { display: none;}SE NÃO QUISER TER TRABALHO DE HOSPEDAR JAVA/SCRIPT .

    ResponderExcluir
  11. Obrigada pela dica Nossa Conta!
    Esta também é uma opção viável.
    Mesmo assim sou adepta de hospedar os códigos javascript em um diretório próprio, desta forma corremos menos risco de ultrapassar a largura de banda e o script não funcionar!

    ResponderExcluir
  12. Oi Aurea, obrigada pela resposta (nos comentários do meu blog attuallmoda).

    Quanto a seguir o 4° item, verifiquei que está tudo correto. Já quanto a conter as linhas #blog-pager-older-link,
    #blog-pager-newer-link ou #blog-pager; verifiquei que #blog-pager também aparece em /*Posts em (post-footer) e outro #blog-pager em /*Mobile.

    Devo tirar um desses códigos?

    bjs

    ResponderExcluir
    Respostas
    1. Ei Re,
      Pode tirar as 2 linhas #blog-pager que encontrou no CSS do seu HTML porque ela já está configurada no código das páginas numeradas.
      Bjks

      Excluir
    2. Obrigada; só hj vi sua resposta! bjs. ;-)

      Excluir
  13. a paginação fica em todas as postagens ou só na pagina inicial ?

    ResponderExcluir
    Respostas
    1. Lucas Silva,
      Fica apenas na página inicial!

      Excluir
  14. Muito bom este seu blog... acompanho ele a algum tempo, e já encontrei muitas dicas preciosas aqui, parabéns pelo seu trabalho tão útil para a blogosfera.

    ResponderExcluir
  15. finalmente um tutorial fácil e que deixe o blog bonito de verdade :D to tão feliz que se eu te encontrasse iria estourar suas bochechas de tanto aperta :D obrigada
    leitorasagaz.blogsport.com.br

    ResponderExcluir
  16. Oi gostaria de SaBer como faz a caixa de texto com a borda esquerda azul que vc usa nesse post

    ResponderExcluir
    Respostas
    1. Olá ADK Online,
      O código daqui é este:
      .post blockquote{margin: 10px 10px 10px 20px; padding: 10px 15px 10px 15px; line-height: 1.6em; color: #333;background:#EEEEEE;border-left: 20px solid #4F879F; }
      .post blockquote p{margin:.75em 0}
      Tem também um post daqui do TPV que ensina como você pode configurar o blockquote do seu blog. Confira:
      http://www.templatesparavoce.com/2008/11/blockquote-e-caixinha-de-codigos.html

      Excluir
  17. Ola Aurea gostaria que vc me ajudasse,eu fiz o como esta explicando mas sumiu todas as minha postagem, e se eu faço uma postagem nao aparece mais me ajuda a conserta isso porfavor

    ResponderExcluir
    Respostas
    1. Olá Jane,
      Infelizmente não consigo te ajudar neste problema. Não tenho muito tempo para isso. Você testou o hack em um blog de testes antes?
      Desculpe.
      Se você pode salvou seu template antes de fazer as alterações pode restaurá-lo, esta seria a solução mais viável.

      Excluir
  18. Muito obrigada. O modelo 5 ficou lindo no meu novo layout!
    Beijos :*
    Bella Tulee | Fan Page

    ResponderExcluir
  19. ficou certo, mas os links não pega '-'

    ResponderExcluir
  20. Muito Obrigada !
    http://www.omelhordemim.com/

    ResponderExcluir
  21. Muito obrigado! O unico tutorial que funcionou :)

    ResponderExcluir
  22. Aqui nao funcionou, alem de ficar dando erro...

    "Blog1" cannot contain element: "#comment". A widget can only contain b:includable elements

    ResponderExcluir
  23. Funcionou perfeitamente. Porém tenho uma dúvida: 100 página é o limite máximo? Possou postagens mais antigas que isso e gostaria de saber.

    ResponderExcluir
  24. nossa está de parabéns! foi o único tutorial que funcionou direitinho no meu blog! tentei vários mas sempre davam algum erro na hora que clicava no próxima página os posts não apareciam! agora o seu além de lindo não dá erro! muito obrigada! coloquei seu site na minha página de créditos !

    ResponderExcluir
  25. Só mostra até a pagina 100... meu blog tem mais de 200 paginas quero que mostre todas e não só a a metade disso...

    ResponderExcluir
  26. Primeiro tutorial de numeração que pegou no meu blog. Entretanto, os modelos não deram certos. Tentei toooodos e as numerações continuam com o padrão de postagem. Já verifiquei e todos os códigos estão corretos no meu template... O que fazer?

    ResponderExcluir
  27. OLÁ minha querida estou precisando muito da sua ajuda, por que a minha famil....... brincadeira mais quero a sua ajuda por que só estar aparecendo isto Page 1 of 2 12» e o link só me leva a pagina inicial de novo o que é que eu faço prometo se vc responde rápido a minha duvida mil e um abraços de agradecimentos. eu lidou!

    ResponderExcluir
  28. Muito obrigado!! Funcionou perfeitamente

    ResponderExcluir
  29. O Tutorial é muito bom. O Erro que to encontrando é que no meu blog tem 1040 postagem, e a numeração só lê 501 pq? Poderia me ajudar a resolver isso!!!

    ResponderExcluir
  30. Aurea me ajude com um problema, os números estão aparecendo normalmente na página inicial, mas quando acesso as postagens, is links "postagem anterior", "pagina inicial"e "próxima postagem" não estão aparecendo. O que posso fazer, isso é muito importante para o meu blog, me ajude por favor.

    ResponderExcluir
  31. Já tentei vários e nenhum funcionou e este também não funcionou .... não aparece nada ...Só some as postagens mais antigas !!

    ResponderExcluir
  32. Funciono muito obrigado pela dica parabens pelo blog!

    ResponderExcluir
  33. Olá tudo bem?
    Segui corretamente e deu certo no meu blog...
    O que queria mudar é apenas (Page 1 of 4) para (Página:1 de 4) teria como fazer isso? Se SIM, como?

    Obrigada desde já
    Letícia

    Blog: www.useeabuse.com

    ResponderExcluir


  34. quando eu substitui essa linha, sumiu os link postagens recentes inicio e postagens antigas tem como usar a paginacao e tambem o link padrao do blogger

    ResponderExcluir
    Respostas
    1. Olá Rafael,
      Vou fazer alguns testes com a sua dúvida e volto para te responder.
      Até mais!

      Excluir
  35. aguardando o teste, e obrigado pela ótima postagens do seu blogger,de qualquer forma já estou usando o que aprendi aqui.

    ResponderExcluir
  36. Olá Aurea, me ajude por favor! No meu blog funcionou apenas na página principal, eu preciso mudar nas páginas do Menu(Marcadores).. Nas páginas marcadores não aparece a numeração. http://tutorihelpdowns.blogspot.com.br/

    ResponderExcluir
  37. Consegui resolver!! Muito Obrigado, de coração! Estava louco atrás desse tutorial tinha tentado vários outros mais nenhum tinha resolvido meu problema. Obrigado!

    ResponderExcluir
  38. Valeu Aurea quebrando a cabeça com tantos tutoriais, e nada dava certo.
    E por fim encontro este incrivel Tutorial, que funcionou perfeito, já fiz o teste e todas as paginas indo e voltando estão 100% ok.
    Muito obrigado por dizponibilizar este excelente tutorial...ty.

    ResponderExcluir
  39. eu criei uma numeração de páginas há uns 5 meses atrás fiquei tão contente, mas do nada a numeração desapareceu hoje, alguém sabe o porquê? ajudem-me.

    ResponderExcluir
    Respostas
    1. Olá,
      Isso aconteceu porque o link do arquivo js do código parou de funcionar.
      http://awesome-navigation.googlecode.com/files/onlinetrick.js
      Vou procurar este código java e incluo no post.

      Excluir
  40. To com um problema estranho: Coloco 10 postagens na home por exemplo, só que na home em si, aparecem bem menos e só nas páginas seguintes que as 10 postagens são mostradas

    ResponderExcluir

Todos os comentários são lidos e moderados antes da publicação.
Para que seu comentário seja publicado leia a Política de Comentários do Blog no post Regras do Blog

Tecnologia do Blogger.