Participe da nossa comunidade de Mulheres Empreendedoras!

Cadastre-se para receber as novidades do blog direto no seu e-mail!

 

22 setembro 2016

PAGINAÇÃO NUMERADA NO BLOG ( 6 MODELOS)

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='https://xkaroline.github.io/followyourdreams/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 

1º 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.

2º Esse tutorial estava funcionando, mas o mesmo foi corrigido no dia 26 de Novembro de 2017 e agora está tudo ok.

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


14 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
  5. substituindo o primeiro codigo dá erro. Tentei sem ele e não deu certo. Eu uso seu template watercolor

    ResponderExcluir
    Respostas
    1. O script era o causador do erro, mas agora estudo ok! Pode refazer o tutorial que dessa vez vai funcionar.

      Excluir
  6. Olá Lorena, tudo bem?
    já usei alguns tutorias seu e felizmente funcionaram bem. obrigada.
    Mas não consigo fazer esse funcionar,faço o passo a passo direitinho, mas a numeração das paginas não aparecem. por favor, me ajuda

    ResponderExcluir
    Respostas
    1. Oi Hallana,

      me manda o link do seu blog pra eu ver onde se encontra o erro. Só assim vou poder te ajudar lindona :*

      Excluir
  7. Boa noite Lorena peguei varias digas no seu blog muito bom ,mas as paginas numeradas estão me dando um baile apesar de ter um pouco de conhecimento não estou conseguindo faze-las aparecerem .Se puder me dar um help agradeço.
    http://baudadri.blogspot.com

    ResponderExcluir
    Respostas
    1. Olá Adriana, tudo bom? As páginas numeradas podem não estar aparecendo por vários fatores: Algum script de outro código pode está causando esse conflito. O seu blog deve estar em modo público para as paginas numeradas aparecerem. Mas se mesmo assim o erro persistir, me manda um e-mail pra eu tentar te ajudar =) Grande beijo :*

      Excluir

Manual Da Blogueira. Todos os direitos reservados © Desenvolvido por Lory Design Studio
Usamos cookies próprios e de terceiros que entre outras coisas recolhem dados sobre seus hábitos de navegação para mostrar publicidades personalizadas e realizar análises de uso de nosso site.
Se continares navegando consideramos que aceita seu uso. Entendi Mais informações