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: "Primeira",lastText: "Última",nextText: "»",prevText: "«"}</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 == "index"'><b:include name='page-navi'/><b:else/><b:if cond='data:blog.pageType == "archive"'><b:include name='page-navi'/></b:if><b:else/><b:if cond='data:blog.pageType == "item"'><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.
Que lindo os modelinhos, adorei todos♥
ResponderExcluirBjão lindona♥
Blog Rafaelle Venttura♥
Que bom que gostou Rafa ♥ Fiz com muito amor pra vocês!
ExcluirBjão linda ♥
Olá...
ResponderExcluirAmei, 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...
Que bom que gostou Jaque <3
ExcluirBjão :*
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!
ResponderExcluirhttp://margaridaemargarida.blogspot.com
Que linda <3 Obrigada Bianca! Fico feliz em saber que conseguiu através do meu tutorial. Um enorme beijo pra você e sucesso!
ExcluirAmei, Foi de grande ajuda <3
ResponderExcluirUm super beijo flor :*
Fico feliz em saber! Agradeço a visita e o comentário Teka <3
ExcluirBjão :*
substituindo o primeiro codigo dá erro. Tentei sem ele e não deu certo. Eu uso seu template watercolor
ResponderExcluirO script era o causador do erro, mas agora estudo ok! Pode refazer o tutorial que dessa vez vai funcionar.
ExcluirOlá Lorena, tudo bem?
ResponderExcluirjá 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
Oi Hallana,
Excluirme manda o link do seu blog pra eu ver onde se encontra o erro. Só assim vou poder te ajudar lindona :*
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.
ResponderExcluirhttp://baudadri.blogspot.com
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