Páginas numeradas para o blog

em 22 de outubro de 2013

Um dos recursos mais bonitos e úteis que uso aqui em meu blog são as páginas numeradas, ao final da área de postagem.
Veja o print:


Existem muitas formas de colocar em seu blog, vou compartilhar 2: uma mais simples, apenas um gadget e a outra mais avançada, que requer mexer no código-fonte do blog.

Para começar, a paginação mais simples:
Acesse a aba Layout de seu blog e clique em Adicionar um gadget. Escolha a opção HTML/JAVASCRIPT e na janela que expandir cole isso:

Copiar o código


Deixei marcado no próprio código tudo que pode ser alterado para que as cores combinem com seu blog.
Depois que terminar a personalização salve o seu gadget e arraste-o para o final do blog. Salve as alterações.

Agora as páginas numeradas que eu uso aqui no blog:
Comece acessando a aba Modelo de seu blog. Clique em Editar html e na caixa do código-fonte tecle Ctrl+F. Na caixinha de busca que abrir digite </body>. Acima disso cole o script que fará a paginação funcionar sem erros:

Copiar o 1º código


Você pode alterar as palavras Anterior e Próxima pelas que desejar. Pode também alterar a quantidade de postagens exibidas por página mudando o número 6 (em displayPageNum=6) pelo de sua preferência.
Se quiser mudar a quantidade de páginas exibidas altere o número 5 (em pageCount=5) pelo número que desejar.
Feito isso salve as alterações.

Agora digite dentro do campo de busca ]]></b:skin> e acima dele cole este código:

Copiar o 2º código


Como você percebe o código é autoexplicativo. Faça as alterações que desejar para que as cores combinem com seu blog e a seguir salve as alterações.

Dicas importantes:
  1. Para que a numeração de páginas funcione é preciso que seu blog seja público pois blogs privados não podem ter a paginação.
  2. É preciso que os feeds de seu blog estejam corretos pois esses gadgets se baseiam nos feeds. Clique aqui e aprenda tudo sobre feeds em um só lugar. 
  3. É preciso que a quantidade de postagens definidas nos códigos seja a mesma definida nas suas configurações do blog. Verifique isso clicando Configurações/ Postagens e comentários.Defina aí, em Mostrar no máximo a quantidade de postagens a serem exibidas.
Não esqueça de salvar se alterar algo, ok?

Gostou?
Se fizer diga nos comentários, gosto de ver...

→Aqui tem um tutorial mais recente com mais uma opção de páginas numeradas para blog

Alguém que escreve. Especialista em si mesma. Leitora que lê muito menos do que gostaria. Blogueira por paixão e profissão. Propriedade da Princesa e da Menininha, e de um cachorrinho muito levado chamado Bloguinho. Tentando viver. Sempre.

92 comentários , comente também!

  1. Olá tudo bem?

    Fiz em meu blog, gostei muito.

    http://destinations-for-travelers.blogspot.com

    Abraços

    ResponderExcluir
    Respostas
    1. Olá Elaine que bom aprender mais um pouquinho com você!Já fiz no meu blog, amei o resultado!!!Deus continue te abençoando!!!
      Rosângela Oliveira

      Excluir
    2. Também fiz em meu blog e ficou super legal Anderson Luiz! Fui salvo pelo "gongo", graças a Deus e à publicação de Elaine Gaspareto, valeu mesmo, um abraço.

      Excluir
  2. Mudou alguma coisa por aqui rsrsrs
    Estou na pressa.
    Favoritei.
    Beijos querida.

    ResponderExcluir
  3. Acho lindoi! Tenho que estar bem tranquilinha pra tentar aqui,rs Vou ver! beijos,chica e obrigadão sempre !

    ResponderExcluir
  4. Elaine que delícia acabei de fazer e tô aqui me sentindo de tanta alegria, obrigada pela generosidade, bjs

    ResponderExcluir
  5. Brilhante suas dicas, amei seu blog.
    Deixo um mimo para você.

    Uma chuva de bençãos desça sobre sua casa!
      
    _..._ ..._(... (  ...).._
      (_....__..._) _(.. (  ...)
      / (_...._) (_...._..._)\
     // / / / / | \ \ \ \
     / / / / | \ \  \
    / /  /  /  | \  \  \
    ♥ ♥    ♥  ♥ ♥   ♥    ♥ 
    ♥ ♥   ♥   ♥    ♥ ♥ ♥   ♥
    ♥   ♥   ♥  ♥   ♥ ♥
     ´´´, •♥♪♥♪♥♪♥♪♥♥♪♥♪♥♪♥♪♥♪♥•
    ´´´¢/Λ\♥♪♥♥♪♥♥♪♥♪♥♥♪♥♪♥•♥♪♥•
    ´´¢/.... \♥♪♥♪♥♥♪♥♪♥♥♪♥♪♥♪♥•♥*
    ´¢/๑۩ ๑.\♥♪♥♪♥♪♥♪♥♪♥♪♥♪♥♪♥•♥*
    ¢/๑۩۞۩.\´♪♥♪♥♪♥♥♪♥♪♥♪♥♪♥♪♥*
    ¨▓¨.♪♥♥♪.▓♥♪♥♪♥♪♥♪♥♪♥♪♥♪♥♪♥•|||||
    ¨▓¨.♪♥♥♪.▓¨★★★★★★★★★★★★|||
    ¨▓¨.♪♥♥♪.▓¨★★★★★★★★★★★★|||
    ¨▓¨.♪♥♥♪.▓ ★★★★★★★★★★★★|||
    ¨♥♥======♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥
    ¨♥♥======♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥

    APDSJC!
    ***Lucy***

    A propósito, caso ainda não esteja seguindo o meu blog deixo aqui o convite:
    Fruto do Espírito

    P.S. Convido a conhecer o blog do irmão J.C.de Araújo Jorge.
    Mensagens atuais, algumas polêmicas, porém abençoadoras...
    Acesse e confira:
    Discípulo de Cristo

    ResponderExcluir
  6. Valeu pela dica!!!
    agnesvata.blogspot.com.br

    ResponderExcluir
  7. Elaine,

    Estou tentando montar o layout do meu blog. E graças a você já fiz vários avanços. Agradeço seu desprendimento, nem todas as pessoas gostam de ensinar aquilo que elas sabem. Estou fazendo no blog teste, assim que estiver tudo pronto volto aqui para avisar. Obrigada mais uma vez. Beijos Kacy Rodrigues.

    ResponderExcluir
  8. Oiê! Seu blog é d+!
    Sempre venho aqui procurar suas dicas!
    Mas não estou conseguindo selecionar o código html desta postagem - pq?
    Espero seu retorno! Ah, e posso te linkar no meu blog?
    bjim

    ResponderExcluir
    Respostas
    1. Para entender porque você não consegue copiar os códigos leia esta página:
      http://www.elainegaspareto.com/p/como-usar-os-tutoriais-deste-blog.html

      Todos os códigos deste blog são copiados do mesmo modo, salvo os mais antigos que ainda não foram atualizados.
      Caso encontre algum assim e tenha certeza que ele não foi atualizado basta dizer nos comentários e no tempo hábil eu modificarei.

      Sim, claro, pode linkar. Ficarei muito honrada!
      beijos

      Excluir
  9. Olá Elaine, coloquei essa paginação no meu blog e adorei. Obrigada.
    Se quiser ver http://corpsequeen.blogspot.com.br/
    Beijos

    ResponderExcluir
  10. vem cá tem como tirar este nome sacana grad this widget kkk e que ele ta me ecomodando

    ResponderExcluir
    Respostas
    1. Não é possível retirar pois trata-se de um script.
      Além do mais são os créditos do desenvolvedor, não seria correto tentar retirar.
      Caso não goste tente o outro, que é o que eu uso. Ele não tem créditos.

      Excluir
  11. Muito legal,não precisa colocar a url do blog onde será implantado o gadget?

    ResponderExcluir
    Respostas
    1. Severino, não precisa. Ele lê o blog onde for instalado, basta configurar certinho como explica o tutorial.

      Excluir
  12. Gostava de saber, o porquê de na página principal estar tudo ok, ou seja, aparece o número de postagens que eu coloquei, mas quando passo para a página 2 ou 3, aparece menos postagens, no caso apenas aparece duas.

    Agradecia a ajuda

    ResponderExcluir
    Respostas
    1. Emanuel, boa tarde
      Para que as postagens apareçam sempre corretas você precisa definir a mesma quantidade em Configurações/Postagens e comentários/Mostrar no máximo
      Defina a mesma quantidade que definiu no gadget e dará certo.
      beijos, boa tarde

      Excluir
  13. Ola, já tentei vários códigos e tentei colocar em vários lugares, mas simplesmente não funciona eu sei q seu código esta correto e o problema esta em meu blog vc pdoeria me ajudar? Coloquei ele como gadget não não rolou coloquei ele onde vc diz e não funciona, não sei oq fazer, na verdade na página principal do blog ele não funciona mas se eu pedir para ver as postagens por exemplo de 2012 ele funciona, meu blog é www.gpexpert.com.br agora um link com os posts de 2013 que aparece o número das páginas http://www.gpexpert.com.br/2013 outra pergunta sei que o blogspot permite q eu controle a quantiade de postagens q irá aparecer ao mesmo tempo no site, mas ele impõe um limite para que nãod demore muito para carregar a página, por exemplo em 2013 tenho mais de 100 postagens mas como vc pode ter percebido pelo link q te passei ele mostrou só as ultimas 15 eu sei q isso é por ter muitas imagens nos posts, mas tem como fazer o blogspot ler todas as postagens

    ResponderExcluir
    Respostas
    1. Jean, creio que seus problemas se devem ao fato de seu template ser externo ao Blogger, e também muito modificado.
      Não há muito o que fazer pois quando há muitos scripts em um template esses scripts podem conflitar entre si e um anula o outro.
      E especialmente se seu blog usa o hack de postagens resumidas a numeração não vai aparecer mesmo.
      Quanto ao número de postagens não há como exibir em demasia, o Blogger sempre vai limitar.

      Excluir
  14. Amei,Elaine. Já tinha,mas essa ficou linda e colorida.

    Tirei os top comentaristas e outros gadjets e meu blog ficou rapidinho.Fui nos sites que indicou e testei.

    Beijinhos


    Donetzka

    ResponderExcluir
  15. Oi Elaine!
    Essa dica é ótima! E, graças à você, agora eu já tenho em meu bloguito!
    Muuuuuito obrigada pela transformação que você fez no meu blog e na minha vida (estou rindo à toa!)!
    Ele está lindo! Estou recebendo milhares de elogios!
    Parabéns e obrigada!
    Beijinhos,
    Cris

    ResponderExcluir
  16. ELaine, amei, sou totalmente leiga, eu não sei o que fiz....e está aparecendo na pagina inicial do meu blog....xmlns:fb='http://www.facebook.com/2008/fbml'....acho que andei mudando alguma coisa de lugar, agora estou com medo de apagar isso e dar problema....vc consegue me ajudar? grata...edna...http://www.comomelhorlogoemagreco.com.br/

    ResponderExcluir
    Respostas
    1. Edna, localize esse trecho em seu código fonte e apague-o. Ele deve estar mesmo em lugar errado, e apagar não deve dar problema não.
      Mas visualize antes de salvar, tá?
      Pra evitar perder algo.
      bjssss

      Excluir
  17. Elaine vc mudou a data desta postagem? Ela já tinha sido postada. Eu não sabia que podia fazer isto..
    Beijinhos...

    ResponderExcluir
  18. Eu fiz o jeito mais fácil e deu super certo, obrigada por essa dica maravilhosa.
    aqui o meu blog: combatometudo.blogspot.com.br
    se quiser ver o resultado ta ai.

    ResponderExcluir
  19. Olá Elaine, acompanho as dicas do seu blog, aprendi muita coisa com você.
    Obrigada por mais essa dica de numeração do blog.
    www.ivearte.com

    ResponderExcluir
  20. Meu blog ficou muuuuuuuito mais funcional depois dessa dica.
    Muito obrigada!

    ResponderExcluir
  21. Amiga, acabei de adicionar as numerações e amei!
    Optei pela primeira opção, já que tenho um pouco de medo de mexer no HTML, sabe, mas ficou uma graça.
    Tão delicado!
    Amei! Obrigada, viu!
    Acho que deu pra perceber que estou estudando profundamente suas dicas para blogs, não é mesmo? (rs*) Uma por uma, acredita? Nem vou comentar em todas pra não tomar seu tempo, mas estou tão deslumbrada com as maravilhas que você nos oferece, que não quero perder nadinha!
    Eu agradeço e Meu Doce Lar também! :-)
    Bjs!!!

    ResponderExcluir
  22. Otimo post! Já implementei no meu blog de tirinhas.
    http://www.tiranicas.com.br/

    ResponderExcluir
  23. Olá , Eu fiz no meu Blog , Mais apareceu tudo bagunçado e só na paginá inicial e não nos Marcadores.

    PorFavor poderia me ajudar,Obrigado

    ResponderExcluir
    Respostas
    1. A paginação numerada só aparece na página inicial do blog. Não funciona nas páginas internas, nem nos marcadores.

      Excluir
    2. Não existe um Código que eu possa trocar no meu Template para aparecer nos Marcadores ? , Se puder me ajudar eu agradeço . Meu e-mail: wjrandroid13@gmail.com

      Excluir
  24. Olá. Eu Baixei meu template da internet e veio com páginas numeradas e quando eu altero o número não acontece nada... Tá Assim > postperpage=7; Eu queria Colocar um número maior só que não muda não importa o número q eu coloque. E eu Mudo nos dois .. no Layout e no HTML. Poderia Me Ajudar ? Meu Blog é: planetseriesrmvb.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Amanda, templates modificados em geral têm códigos diferentes.
      Lamento, mas como não conheço o código do seu não sei o que pode ser feito pra resolver.
      Desculpe.

      Excluir
  25. Olá Eliane. Minha pergunta é: Posso ter mil páginas por exemplo? Ou entendi que o número é limitado no blogger? Pergunto antes de fazer a mudança com receio da limitação.

    ResponderExcluir
    Respostas
    1. Páginas estáticas são limitadas a 20 por blog.
      Páginas de postagens não têm limite, então teoricamente você pode ter tantas quantas forem as suas postagens.

      Excluir
  26. Como deixa pagina numeradas só em um marcador

    ResponderExcluir
  27. Muito bom, obrigado, ficou ótimo no meu blog
    http://xputasbrasil.blogspot.com.br/

    ResponderExcluir
  28. Já tinha tentado imensos códigos, bem mais complicados que este e não deu certo. Só estes deram! Muito muito obrigada!
    E as cores estão boas com o meu blog: http://sermulher-sm.blogspot.pt/
    Era o que precisava! Vlw
    Já te sigo.

    ResponderExcluir
  29. Somente este código que deu certo no meu blog.! :)

    ResponderExcluir
  30. Acabei de usar o código! Perfeito!
    Estou feliz demais!
    Obrigada!
    http://martaeunice.blogspot.com.br/

    ResponderExcluir
  31. Consegui, obrigada pela ajuda. Seu blog é demais!

    www.entreladies.com

    ResponderExcluir
  32. seu blog me salvou. foi o unico que deu certo . valew moça bonita

    ResponderExcluir
    Respostas
    1. rsrsrs, muito obrigada pelo moça e pelo bonita rsrsr

      Excluir
  33. Muito Bom... Mas no meu blog fica em inglês. Como deixar em português?

    ResponderExcluir
  34. Muito bom.. o unico que realmente funcionou. Parabéns e obrigada!!

    ResponderExcluir
  35. Nossa depois de muitas tentativas o seu foi o único que deu certo, usei o tipo 2, mexendo diretamente no HTML
    Obrigada ;)

    www.combatometudo.com.br

    ResponderExcluir
  36. Me ajuda aí, porque já tentei os 2 métodos e não funcionou!!!

    ResponderExcluir
    Respostas
    1. Jozeline, tem certeza?
      Acabei de ver em seu blog, deu certo?

      Excluir
    2. :( acabei de tentar e tmbm não consegui!

      Excluir
    3. opa! só não deu certo quando clica em visualizar mas depois de salvar no site deu certo! vlw!

      Excluir
  37. É realmente um ótimo recurso, porém existe um erro, ele só mostra até a página 101, se seu blog tiver mais que isso quando chegar na página 101 não apareceram mais páginas, constará que a página 101 é a ultima....Queria sabre se tem como corrigir esse erro meu blog tem em torno de 200 páginas, quero que mostre todas e não até a metade...

    ResponderExcluir
  38. Li quase todos os comentários desta postagem,gostei do "Moça bonita",...rsrs...realmente você é bonita por dentro e por fora.
    Estou levando seu banner é a única maneira de agradecer,depois de curtir sua página no Facebook.
    Aproveito para desejar a você ao maridão,enfim a família toda"Feliz Natal" e" Ano Novo Também"
    Sucesso sempre,beijos

    ResponderExcluir
  39. Adorei! Apliquei o módulo simples e amei o resultado. Rápido e prático.
    Obrigada pelas dicas. E aproveito para lhe desejar um ano de 2015 cheio de paz, saúde e muito sucesso.
    Bjos!

    ResponderExcluir
  40. Oi, gostaria de saber como tiro a informação de número de páginas que fica antes dos números.

    Por exemplo:

    Paginas (4) | 1 | 2 | 3 | 4 | Próxima

    Obrigada.

    ResponderExcluir
    Respostas
    1. Descobrisse, Daiane? Também queria saber

      Excluir
    2. Experimentem retirar as palavras Anterior e Próxima do primeiro código.
      Nunca tentei, mas se quiserem experimentar...

      Excluir
  41. Muito obrigado. O seu código foi o único que funcionou pra mim.

    http://malvadamente.blogspot.com.br/

    ResponderExcluir
  42. Ei Elaine,adorei o tutorial! Coloquei no meu blog,ficou super legal.
    Só que gosta de tirar: Ex: PAGE 1 OF 2,tem como?
    Beijos
    http://amandatolentino.blogspot.com.br/

    ResponderExcluir
  43. Parabens!

    Mas tem só um problema. Ele só mostra 500 postagens. Blogs com mais de 500 postagens, não mostra o resto.

    Vc poderia passar o código que vc usa aqui em seu site. Desempacotei seu código, fiz umas mudanças. E consegui resolver meu problema.

    Estou tentando fazer esta paginação funcionar em conjunto com o scroll infinito.

    Desculpe ter "roubado" seu código.

    ResponderExcluir
    Respostas
    1. Olá novamente!

      Consegui integrar o código que peguei aqui, com scroll infinito (clicando em uma seta)

      Foi um tanto dificil. Consegui que ao clicar em carregar mais postagens, alem de carregar mais postagens na mesma página (sem recarregar a página), ainda altera os links da paginação, atualizando a página atual e considera ao carregar postagens de outra página, como se a página tivesse sido visitada.

      Um pouco dificlde explicar. Mas visite a página (pode apagar o comentário depois se quiser - até prefiro)

      http://www.grandesclassicosdocinema.com/

      Caso queira o codigo entre em contato comigo no referido site, ou atraves da pagina de contato, ou deixando um comentario. me diz lá oque vc acha.

      Até mais

      Excluir
  44. Oie, já tentei de todos os jeito e nada. Tentei também os outros códigos de numeração que vc passou, mas nada muda.. Fica apenas o espacinho branco la. Sei que o problema é no blog, mas não sei como resolver :/

    ResponderExcluir
    Respostas
    1. O 1º n deu aqui no meu tbm, mas o 2º, após salvar, deu certinho.

      Excluir
  45. Perfeito, muito obrigado! https://www.diariodocirco.com.br

    ResponderExcluir
  46. Olá, gostaria de agradecer por disponibilizar os códigos... Mas infelizmente achei um erro na 2ª opção! A 1ª opção não funcionou no meu blog, a 2ª sim, Enfim, a numeração funciona perfeitamente, mas quando clico em um marcador ela não aparece e acaba mostrando todos as postagens daquele marcador. Será que há como corrigir?

    ResponderExcluir
  47. Não consigo fazer no meu blog, meu html tá cheio desses códigos e nenhum funciona buaááá me ajudem please, eu faço tudo certinho e mesmo assim ainda fica a padrão page 1 of 3 1,2,3...

    ResponderExcluir
  48. bom dia! o meu deu certo, mais só na pagina de inicio, como eu faço pra colocar nos outros menus, tipo Musicas, Jogos, Filmes etc. nesses menus eu não consigo colocar na paginação

    ResponderExcluir
  49. Muito obrigada pelo post ajudou muito. Na página inicial funcionou legal. Mas eu gostaria de saber como eu uso essa numeração dentro das páginas criadas. Por exemplo eu tenho um blog de receitas e tem a página de Salgados, como eu posso enumerar mais páginas dentro desta categoria Salgados? Pois já tem muitas postagens dentro desta página e seria legal usar somente umas 10 por página ai ir pra outra...

    ResponderExcluir
  50. no meu não funcionou , ficou aparecendo o nome acima do banner , me ajuda pfv
    http://playtutorsdownloads.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Creio que o motivo se deve ao fato de seu template ser externo ao Blogger, customizado.
      Aí provavelmente há códigos que causam conflito...

      Excluir
  51. a segunda opção deu certo.parabéns, obrigado

    ResponderExcluir
  52. Muito obrigado ajudou muito, utilizei o modelo direto no HTML mesmo.

    ResponderExcluir
  53. Muito obrigado por compartilhar seus conhecimentos aqui no blog. Depois de testar vários tutoriais, este foi o único que funcionou, Parabéns! Tenho apenas uma dúvida, compartilhada também pelo Super Downs, como aumentar o limite de 100 páginas? Dá para editar e alterar esse valor nos códigos?

    ResponderExcluir
    Respostas
    1. Esron, nunca tentei aumentar o limite. A que eu uso atualmente não limita, então não sei dizer.
      Uso a que está como sugestão ao final do post..

      Excluir

Olá! Muito obrigada por ler meu blog e obrigada também por se dispor a comentar meus posts. Seja muito bem-vindo(a)!

Importante!
Devido à falta de tempo hábil eu não me comprometo a responder perguntas referentes aos tutoriais postados neste blog.
Pedidos de ajuda individual serão respondidos conforme o meu tempo e disponibilidade permitirem.
Por favor, entenda: comentários sem relação alguma com o post não serão liberados e nem respondidos.

Para saber mais sobre a melhor forma de utilizar este blog leia Termos de uso do blog.



Muito obrigada, fique à vontade para interagir.
Mas lembre-se:
Gentileza, educação e boas maneiras servem também para a vida nos blogs…