Como numerar as páginas do blog?

em 4 de fevereiro de 2014


Há algum tempo eu mostrei aqui no blog algumas opções bem legais para quem deseja colocar paginação numerada no blog.
Relembre:

O tutorial de hoje é ainda mais simples, um pouco de atenção e paciência e todo mundo vai conseguir fazer.
Comece acessando o seu painel do blog.
Clique em Layout e a seguir clique em Adicionar um gadget.
Na caixa de opções que abrir selecione HTML/JAVASCRIPT.
Dentro da caixa que expandir cole este código:

http://static.tumblr.com/glpbb7a/TItn00snp/p__ginas_numeradas.txt

Salve, arraste para o final do blog e salve as alterações.


Dicas extras:
Onde você lê:
var numshowpage=4;  onde 4 é a quantidade de páginas mostradas (1, 2, 3, 4). Altere se quiser mais ou menos. A página ativa não entra na conta.
var postperpage =3;  onde 3 é a quantidade de posts mostrados por página. Esse número deve ser igual à quantidade de posts que seu blog exibe na página inicial. Você define isso seguindo o roteiro Configurações/Postagens e comentários/Postagens.
var upPageWord="Anterior"; Mude a palavra anterior caso queira;
var downPageWord="Próxima"; Mude a palavra Próxima caso queira

Todas as cores podem ser mudadas. Basta trocar o código de cada uma delas pelo código hexadecimal da cor que desejar. As cores sempre são definidas por códigos hexadecimais precedidos do sinal #.
Aqui tem uma tabela de cores para você escolher as suas preferidas.

Cuidado para não apagar nenhuma aspa ou sinal ao mexer no código. Uma coisa fora do lugar pode fazer com que ele deixe de funcionar.


Se tiver dúvidas diga nos comentários, e caso alguém possa ajudar a resposta pode ser dada aqui.
Ajudarei, caso possa, e se a solução já não estiver explicada no tutorial.

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.

58 comentários , comente também!

  1. Boa dica,Elaine! Assim que der um tempinho vou tentar e se fizer, te falo! bjs, obrigadão sempre, de volta,chica

    ResponderExcluir
  2. OI Elaine bom dia!
    Nossa enfim tomei coragem e mudei algumas coisas no blog depois que vi o post da minha amiga Maria(Blog M de Maria).
    Já conhecia seu trabalho aqui na blogosfera, mas confesso que sempre tive receio de mudar e mexer no HTML..rsrs. Vim agradecer , consegui bloquear as cópias. Fiz o que mais me incomodava, o restante começou a dar erro e parei. Achei melhor..rsrs.
    Vou me organizar aqui e te mandar um email, gostaria muito de fazer mudanças significativas no blog. Assim que me planejar melhor vou te procurar ;D
    Um abraço
    Paty

    ResponderExcluir
  3. Elaine querida,
    vc é uma fofa, sempre nos ajudando com suas dicas preciosas!

    Bjs, fique com Deus ♥

    ResponderExcluir
  4. Muuuuito obrigada, caçei horrores por um tutorial de paginação para o novo blogger. Você foi minha salvação. Beijos.

    http://blogdabrubb.blogspot.com.br/

    ResponderExcluir
  5. Oi Elaine!
    Esse eu já fiz !!!! rs
    Mas posso mudar :)

    Como te disse, acho que não me apaixonarei, esse leve romance já está bom rs
    bjsss

    ResponderExcluir
  6. Oi, querida Elaine...
    YES!!!
    Fiz e deu certinho... só uma dúvida: tem como mudar a fonte e o tamanho dela?
    Beijos, mega agradecidos....

    ResponderExcluir
    Respostas
    1. Patrícia, sempre que você ver no código esse sinal # seguido por um código, geral hexadecimal, ele se refere às cores.
      Vá trocando até achar qual faz o que...
      Dá certinho e a gente ainda se diverte rsrsr
      beijossss

      Excluir
  7. Eu já coloquei no meu!! Ficou lindão. Aproveitando a "reforma", estou levando seu badge.
    beijo

    ResponderExcluir
  8. Elaine, voce não tem noção como seu blog, me ajuda!!Obrigada mesmo!!Bjss

    ResponderExcluir
  9. Visito sempre, seu blog é lindo e completo em todos os sentidos... parabéns !

    seguindo aqui...

    http://naiamelo.blogspot.com.br/

    bjo

    ResponderExcluir
  10. Olá Elaine,
    deu certinho. Obrigada!!!!!!!!!
    Beijocas e uma semana maravilhosa.
    Jana =)

    ResponderExcluir
  11. Olá Elaine
    Ficou muuito bom o código! Obrigado mesmo!
    Mas acho que fiz algo errado, não sei...
    Quando eu clico na pág 2, ele vai normalmente, mas na hora de voltar a página 1, não volta :s
    Me ajuda aew ! Obrigado =D

    ResponderExcluir
    Respostas
    1. Kelvin, eu teria que ver o blog onde instalou pra opinar.
      Qual o blog?

      Excluir
  12. Ok!
    Este aqui é o meu blog http://boasnoticiasdecristo.blogspot.com.br/ ainda está em fase de construção!
    Obrigado Elaine :)

    ResponderExcluir
    Respostas
    1. Kelvin, acho que o script das páginas numeradas está dando conflito com algum outro script que use JQuery em seu blog.
      Acho que terá que escolher o que manter porque nem sempre é possível ter scripts que conflitem...

      Excluir
    2. Tudo Bem! Muuito Obrigado Elaine, eu vou ver o que faço sim :)

      Excluir
  13. Muuito Obrigado Elaine,
    Vou dar uma olhada nisso sim :)

    ResponderExcluir
  14. Oi Elaine, tudo bom?
    Faz tempo que eu procurava um código sem erros, até que enfim encontrei rs, muito obrigada!
    Beijos!

    ResponderExcluir
  15. Obrigada pessoal, gostei tanto da materia

    ResponderExcluir
  16. Obrigada pessoal, gostei tanto da materia

    ResponderExcluir
  17. Oioi Elaine, muito bom seu tutorial, funcionou muito bem no meu blog e ficou uma graça...porem aconteceu um problema...a numeração aparece apenas na home no blog, se eu clico em algum dos links do menu horizontal ela desaparece. Você, ou alguém, por uma caso sabe como posso arrumar isso? Obrigada :))

    ResponderExcluir
  18. Oi Elaine, muito bom, funcionou perfeitamente.
    Se der de uma olhada como ficou.
    PES Edições PS2

    Muito obrigado!

    ResponderExcluir
  19. Elaine, muito boa essa paginação... nenhum outro código funcionava no meu blog, e esse ficou perfeito! Muito obrigada, ajudou muito... Muito sucesso para você, seu blog é ótimo!

    Jessika Barbosa.

    ResponderExcluir
  20. Oi Elaine, muito obrigada pelo tutorial, consegui instalar sem problemas. Mas eu pensei que essa numeração apareceria em qualquer página do blog, não só na página principal. Por exemplo, quando clico em qualquer categoria do meu blog (cliquei na categoria com o maior número de posts), a página não aparece numerada. Você sabe como eu poderia colocar numeração nelas também?

    beijos e obrigada! :)

    ResponderExcluir
  21. Mas como vou poder fazer o tutorial , se você bloqueou a seleção do blog?

    ResponderExcluir
    Respostas
    1. Clique no botão Copiar o código e você conseguirá.

      Excluir
    2. Obrigada por responder , mas antes não tinha esse botão :/ vc editou o tutorial? não têm mais pelo html :/ , agradeço sua atenção :D

      Excluir
  22. Ola Elaine!
    Adorei as dicas, Peguei um template básico e personalizei ele todo com varias dicas daqui. Ficou como eu queria.
    Da uma olhadinha lá pra vc ver o que sua dicas fizeram. http://bloglindacor.blogspot.com.br/
    Bjs

    ResponderExcluir
  23. Muito obrigada Elaine!!! Amo suas dicas...

    ResponderExcluir
  24. Muito obrigada, nossa estou muito feliz, amei sua dica e salvou minha vida hehehe,
    se quiser dar uma passadinha pra conferir....
    http://mundorosajozeline.blogspot.com.br/
    Ahhh e já estou seguindo seu blog!!!

    ResponderExcluir
  25. Elaine, voce sempre me ajudando com meu blog!! Obrigada pelas dicas fofo!

    Beijooos

    http://blogdasrtapaloma.blogspot.com.br/

    ResponderExcluir
  26. Olá querida, adicionei o código no meu blog, mas ele não parece! O que faço?

    ResponderExcluir
    Respostas
    1. Lain, em templates muito modificados ou baixados da internet nem sempre dá certo.

      Excluir
  27. Olá, acabei de ver este post, e realmente ele foi muito útil, no entanto eu tenho um menu usado por marcadores, e quando vamos para outro sítio sem ser a home page, ele vai continuar a aparecer aquilo do página inicial e das mensagens mais antigas, etc, o blog é: www.100lmts.blogspot.com

    Têm como resolver esta situação ?

    ResponderExcluir
  28. ótimo poste Elaine
    você esta de parabéns
    essa postagem mi ajudou bastante
    muito grato

    ResponderExcluir
  29. Aki não funfou, segui o tuto e nada!!

    ResponderExcluir
  30. Elaine, novamente estou aqui para agradecer suas postagens, que a cada dia venho aprendendo mais. Meu blog está ficando da maneira que eu quero graças a suas dicas.

    Bjos e obrigada.

    ResponderExcluir
  31. Olá Elaine, acabei de instalar em meu blog, valeu as dicas, valeu mesmo...Vou voltar sempre aqui. Um xeru!

    Sandra
    http://pedacinhobysandra.blogspot.com.br/

    ResponderExcluir
  32. Elaine adorei... suas dicas foram ótimas e acertei de primeira. mudei as cores certinho, para rosa claro e rosa mais escuro. Obrigada! Visite o meu blog:
    Adiléa
    www.misturadealegria.blogspot.com.br

    ResponderExcluir
  33. Uau! Ótimo tutorial, parabéns eu consegui fazer tudinho <3.

    ResponderExcluir
  34. Este comentário foi removido pelo autor.

    ResponderExcluir
  35. Já tentei vários códigos incluindo esse nenhum ta funcionando e sumiu pagina inicial e postagens antigas por for favor me ajudem estou em desespero

    ResponderExcluir
  36. Muito obrigada! Funcionou direitinho!

    ResponderExcluir
  37. Olá, Elaine
    obrigada pelos tutoriais, são ótimos!
    Consigo numerar as páginas do meu blog. Porém, ele mostra uma numeração que não inclui todas as postagens do blog. Por ex.: 25 pág. com 6 postagens cada.
    Se você puder me ajudar ficarei muito grata!
    bj
    Pecunia MM

    ResponderExcluir
    Respostas
    1. Pecunia, lembre que precisa colocar a mesma quantidade de posts no código numerado e no Layout do blog, na área Postagens do blog.
      Senão dá erro...

      Excluir
  38. Oi Elaine, tudo bem? Obrigada pelas dicas valiosas. Usei muitas delas no meu blog. Mas eu tenho uma dúvida: eu retirei a mensagem padrão do blog de "página inicial/ anterior/ próxima". Esse código funciona assim mesmo, ou eu terei de reverter essa alteração?
    Muito obrigada.

    ResponderExcluir
    Respostas
    1. Lih, eu não sei dizer.
      Experimente colocar o código e veja se funciona, depois compartilhe com a gente se dá certo mesmo sem os links de navegação originais :)
      bjss

      Excluir
    2. Elaine, acabei de fazer o teste. Eu precisei reverter as alterações que havia feito antes. Eu colocava os códigos, mas nada aparecia. Esses códigos como que "transformam" as mensagens padrão do blogger em números de páginas. Se o display estiver desativado, logo os números também não aparecem. Tanto que, pra confirmar, eu apaguei os códigos; aí apareceram as mensagens padrão aonde antes estava a numeração das páginas. Obrigada de novo. Abraços.

      Excluir
  39. Mega funcionou....estava sem esperanças depois de muitas tentativas frustadas com outros códigos e de repente...deu certo. Obrigada de coração.

    ResponderExcluir
  40. brigaduuuu não aguentava mais assistir videos que não dava certo vlw

    ResponderExcluir
  41. Oi Elaine :)

    Meu blog já tinha as numerações de página, só que não funcionava direito, aí eu fiz como vc falou e tbm não deu certo. Não apareceu as páginas. Eu tentei assim, e do outro jeito que vc ensinou, mexendo no código fonte. Nenhum funcionou. Vc pode me ajudar?

    Obrigada <3

    ResponderExcluir

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…