PAGINAÇÃO NUMERADA NO BLOG ( 6 MODELOS)

22 setembro 2016

paginação numerada no blog

Como colocar paginação numerada no blog é mais uma aula da nossa série layout dos sonhos, onde trago 6 modelos para você personalizar seu cantinho.

Paginação numerada deixa o blog com um estilo elegante e facilita a navegação do leitor, pois esse hacker mostra do primeiro ao último post. No layout base que disponibilizei para trabalharmos nele, já possui a paginação instalada, mesmo assim, vamos fazer o tutorial para você que está criando seu layout em outra base.

Lembre-se sempre de fazer um backup do layout antes de fazer qualquer personalização, para que não perca o que já foi feito. 



1°  Acesse a caixa de códigos do seu template, clique dentro 
dela e aperte as teclas ctrl+f e pesquise :

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

2º Acima da linha encontrada, cole o seguinte código:

<b:includable id='page-navi'><div class='pagenavi'><script type='text/javascript'> var pageNaviConf ={perPage: 5,numPages: 8,firstText: &quot;Primeira&quot;,lastText: &quot;Última&quot;,nextText: &quot;&#187;&quot;,prevText: &quot;&#171;&quot;}</script><script src='http://yourjavascript.com/51103499221/paginacaonumerada.js' type='text/javascript'/> <div class='clear'/></div></b:includable>
O número 5 é relacionado a quantidade de posts que irá aparecer, ele deve ser igual ao que está configurado na aba "Postagens do blog", caso contrário haverá um conflito ao passar de páginas, veja:


paginação numerada no blog




paginação numerada no blog

3° Agora pesquise por: 


<b:include name='nextprev'/>


E o substitua pelo seguinte código:


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


4º Chegou o momento de dar cor e vida a nossa paginação numerada. Pesquise o trecho ]]></b:skin e acima dele cole um dos modelos de preparei pra você. 


MODELO 1



/*--- Paginacao numerada inicio --- */.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: #fff;margin: 2px;background: #000000;background-position: bottom;border-radius: 30px;font-size: 22px;}#blog-pager a:hover, .pagenavi a:hover {background: #5B5B5A;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;}#blog-pager-older-link, #blog-pager-newer-link {float: none;}.pagenavi .current {background: #5B5B5A;} /*--- Paginacao numerada fim --- */

MODELO 2


/*--- Paginacao numerada inicio --- */.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: #fff;margin: 2px;background: #FF5CDA;background-position: bottom;border-radius: 30px;font-size: 22px;}#blog-pager a:hover, .pagenavi a:hover {background: #FFB2EE;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;}#blog-pager-older-link, #blog-pager-newer-link {float: none;}.pagenavi .current {background: #FFB2EE;} /*--- Paginacao numerada fim --- */

MODELO 3


/*--- Paginacao numerada inicio --- */.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: #fff;margin: 2px;background: #85AEFF;background-position: bottom;border: 1px solid #538DFF;font-size: 22px;}#blog-pager a:hover, .pagenavi a:hover {background: #BFD5FF;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;}#blog-pager-older-link, #blog-pager-newer-link {float: none;}.pagenavi .current {background: #BFD5FF;} /*--- Paginacao numerada fim --- */

MODELO 4


/*--- Paginacao numerada inicio --- */.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: #fff;margin: 2px;background: #C192D7;background-position: bottom;border: 1px solid #B565DA;font-size: 22px;}#blog-pager a:hover, .pagenavi a:hover {background: #FF41E6;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;}#blog-pager-older-link, #blog-pager-newer-link {float: none;}.pagenavi .current {background: #FF41E6;} /*--- Paginacao numerada fim --- */

MODELO 5

/*--- Paginacao numerada inicio --- */.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: #151515;margin: 2px;background: transparent;background-position: bottom;border: 1px solid #424242;font-size: 22px;}#blog-pager a:hover, .pagenavi a:hover {background: #D8D8D8;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;}#blog-pager-older-link, #blog-pager-newer-link {float: none;}.pagenavi .current {background: #D8D8D8;} /*--- Paginacao numerada fim --- */

MODELO 6


/*--- Paginaçao numerada inicio --- */.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: #151515;margin: 2px;background: transparent;background-position: bottom;font-size: 22px;}#blog-pager a:hover, .pagenavi a:hover {color: #424242;border-bottom: 1px solid #151515;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;}#blog-pager-older-link, #blog-pager-newer-link {float: none;}.pagenavi .current {color: #424242;border-bottom: 1px solid #151515;} /*--- Paginacao numerada fim --- */

#Atenção: Se você está personalizando seu layout em nossa base, não vai precisar fazer todo processo, basta apenas fazer o 4º passo, que é adicionar estilo ao hacker.

Se você perdeu as aulas anteriores não tem problema, abaixo você confere tudo que já rolou nessa série, lembrando que a próxima e última, será "como adicionar rodapé personalizado no blog".


E se você gostou já sabe o que fazer! Curta e compartilhe esse post com os amigos, siga o blog em "Faça parte" que fica na lateral do blog e curte a nossa página no facebook para nunca perder nossas atualizações.


Créditos ao blog Follow your dreams


8 comentários:

  1. Respostas
    1. Que bom que gostou Rafa ♥ Fiz com muito amor pra vocês!

      Bjão linda ♥

      Excluir
  2. Olá...
    Amei, a dica...
    Convido, você a lê ao posts especial de 600 leitoras do meu blog, para saber click no link abaixo:
    http://jaquevirtual.blogspot.com/2016/09/diversosespecial-600-leitoras-perguntas.html

    Até, mais...
    JaqueVirtual...

    ResponderExcluir
  3. Nossa, seu blog é incrível! Há uma semana venho tentando personalizar o meu blog, e nunca acertei a paginação com outros tutoriais. Além disso, usei também o tutorial da personalização dos comentários e li milhões de outras matérias. Já pode me considerar fã de carteirinha do Manual da Blogueira!
    http://margaridaemargarida.blogspot.com

    ResponderExcluir
    Respostas
    1. Que linda <3 Obrigada Bianca! Fico feliz em saber que conseguiu através do meu tutorial. Um enorme beijo pra você e sucesso!

      Excluir
  4. Amei, Foi de grande ajuda <3

    Um super beijo flor :*

    ResponderExcluir
    Respostas
    1. Fico feliz em saber! Agradeço a visita e o comentário Teka <3
      Bjão :*

      Excluir