PAGINAÇÃO NUMERADA NO BLOG ( 6 MODELOS)

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:

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

• Baixe o layout base
• Background personalizado
• Cabeçalho com largura total
• Menu no topo com caixa de busca
• Slide em miniatura (2 MODELOS: QUADRADO E REDONDO)
• Categorias em imagem
• Centralizando o título do post
• Personalizando o rodapé do post
• Seta de volta ao topo (8 MODELOS)
• Postagem Relacionada
• Títulos dos Gadgets Personalizados (5 Modelos)
• Perfil da blogueira com foto arredondada, descrição e icones
• Caixa de busca personalizada
• Exibir último vídeo do youtube no blog
• Newsletter personalizada + 4 modelos gratuitos
• Arquivo em forma de calendário
• Personalize os comentários do blog
• Como criar um Blogroll com imagens
• Comentários do blog personalizado
• Comentário via facebook 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