Como colocar Widget páginas numeradas no Blogger


Exibir uma navegação mais prática para seus leitores, torna a passagem pelo blog mais agradável. O que faz um leitor não voltar ao seu blog é a dificuldade de navegação, dificuldade em encontrar o que quer. Por isso, sempre deixe seu blog limpo e, procure mante-lo o mais objetivo possível. Colocando a paginação numerada, torna o ambiente mais agradável para seu leitor. Então, vamos aprender, de uma forma bem simples, a como colocar páginas numeradas no Blogger.


Quando disse que seria bem simples, estava falando sério. Acesse o Blogger e clique na guia "Layout". Agora siga as instruções da imagem abaixo. Clique para ampliar.

paginas numeradas blogger

Clique em ~> Adicionar Gadget ~> HTML/Javascript e cole o código abaixo onde a figura ACIMA mostra:

<style>#blog-pager{clear:both;margin:20px 0 20px;font-size: 12px;padding:10px 0;}#blog-pager-newer-link{float: left;}#blog-pager-older-link{float: right;}.Profile img{border:3px solid;float:left;margin:5px 10px 5px 0;padding:2;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}.profile-data{color:#999999;font:bold 20px/1.6em Arial,Helvetica,Tahoma,sans-serif;font-variant:small-caps;margin:0;text-transform:capitalize;}.profile-datablock{margin:0.5em 0;}.profile-textblock{line-height:1.6em;margin:0.5em 0;}a.profile-link{clear:both;display:block;font:80% monospace;padding:10px 0;text-align:center;text-transform:capitalize;}h2.date-header, .PageList h2{display:none;}#blog-pager-older-link a,#blog-pager-newer-link a,a.home-link,.showpageNum a,.showpage a{background: url(http://2.bp.blogspot.com/-vMGk4QknV5A/Tw0--89TczI/AAAAAAAABJA/O21z_-ybUJs/s1600/nav.jpg) repeat-x;border:1px solid #ae4402;color:#fff;margin:2px;padding:6px 10px 5px;text-decoration:none;text-shadow: 1px 0 1px #000;}#blog-pager-older-link a:hover,#blog-pager-newer-link a:hover,a.home-link:hover,.showpageOf,.showpagePoint,.showpageNum a:hover,.showpage a:hover{background: url(http://1.bp.blogspot.com/-9uSn4H6vTk8/Tw0-_8Y1vQI/AAAAAAAABJE/jjhEM6mUFDk/s1600/nava.jpg) repeat-x;border:1px solid #000000;color:#fff;margin:2px;padding:6px 10px 5px;text-shadow: 1px 0 1px #000;}</style><script type='text/javascript'>var postperpage=10;var numshowpage=5;var upPageWord="Anterior";var downPageWord="Pr&oacute;xima";var urlactivepage=location.href;var home_page="/"</script><script src='http://code.helperblogger.com/hb-page-navi.js' type='text/javascript'></script>

Salve, e veja se está tudo ok. Pronto!
Disse que seria bem simples, e é! ;) E aí, gostaram?

Créditos: Helper Blogger.

51 comentários:

  1. Valeu Rogério! Está procurando por esse recurso, mas a maioria não dava certo.
    Enfim, um que funcionou! Obrigado mesmo.

    Há, eu fiz uma pequena modificação para traduzir o Page 1 of 2.. e etc. Para Pagina 1 de 2... e etc. Caso você deseje usar o link está abaixo:

    https://sites.google.com/site/josuesoftware/textos/page-navi.js

    ResponderExcluir
  2. Caramba! Como procurei por algo assim. Valeu mesmo.

    ResponderExcluir
  3. Olá Wilamis! Tudo bem?
    Nossa, fiquei encantada!
    É um recurso que eu tanto queria, mas sem que fosse necessário entrar no código HTML... instalei rapidinho, bem fácil e ficou ótimo! Nem tenho como agradecer!
    Estou acompanhando-o em várias redes sociais!
    Muito obrigada mesmo!
    Abraços e ótimo final de semana!
    Adriana

    ResponderExcluir
    Respostas
    1. Adriana, obrigado!

      Ainda bem que era justamente o que você queria e mais uma vez, obrigado por seguir o Redes e Blogger!

      Abraços!

      Excluir
  4. caraaa! muitooooooooo obrigadooooo!
    tava procurando um codigo legal a dias e nao encontrava, valew mesmo!

    ResponderExcluir
  5. VAAALEEEUUUU! o único que deu certo para mim,obrigada!
    http://surtodefilmes.blogspot.com.br/

    ResponderExcluir
  6. Parabéns cara, eu estava quebrando a cabeça com vários métodos que diziam fácil e eficiente, mesmo instalando perfeitamente sempre ficava com algum problema. Mas esse seu tutorial ficou perfeito. Meus Parabéns novamente.

    ResponderExcluir
  7. Valeu Rogério! Está procurando por esse recurso, mas a maioria não dava certo,Esse deu perfeito

    ResponderExcluir
  8. Valeu mesmo... e o que é mais legal é que funciona mesmo, obrigada.

    ResponderExcluir
  9. O meu fico laranja tem como mudar a cor???

    ResponderExcluir
  10. vish, o meu não tem Adicionar um Gadget embaixo das Postagens do Blog, D: e agora?? rsrs

    ResponderExcluir
  11. O melhor de todosssss que ja vi nessa net!
    Obrigada!!!

    ResponderExcluir
  12. Instalei e ele não reconheceu todas as páginas. Ele para de mostrar na página 19, porém ainda tem conteúdo no blog que foi suprimido.

    Temo como corrigir esse erro?

    ResponderExcluir
  13. AEW MANO VLW SHOW DE BOLA A MELHOR DE TODAS SIMPLES FACIL E RAPIDO SO TU MESMO IRMAOZINHO VLW MESMO

    ResponderExcluir
  14. po! ja tinha tentado todos os códigos que achei e nenhum dava certo ,esse sim, sinples, e funcionou de primeira. valeu mesmo!!

    ResponderExcluir
  15. vlw muitissimo bom
    http://assistirfilmes-on.blogspot.com.br

    ResponderExcluir
  16. Queria lhe agradecer por publicar esse tutorial realmente foi o único que me serviu / meu modelo sofreu varias alterações e não estava mais aceitando esse tipo de hack / parabéns pelo seu trabalho e muito sucesso
    http://www.novinhasafada.com.br/

    ResponderExcluir
  17. ME ajuda eu conssigui colocar o gadget certinho co que quando eu posto enche a pagina inicial e algums post somem e a pagina 2 nao aparece ,

    responde aqui porfavor ;(

    ResponderExcluir
  18. Queria saber como mudava a cor de laranja para azul ? me ajudem!!!

    ResponderExcluir
    Respostas
    1. Para mudar a cor, vc tem que ir na URL do background e trocar a imagenzinha quase invísível que está lá por uma da cor que vc quer... dá pra trocar as 2 cores...

      Excluir
  19. Muito obrigado Rogerio pelo post de ajuda,estou começando
    agora a me aventurar pelo mundo dos blogs e este post de paginação numerada foi de grande valor.

    Obrigado!!!!!!!!!!!

    ResponderExcluir
  20. no meu blog num aparece mas valeu de quaçquer jeito

    ResponderExcluir
  21. Valeu... ficou bem legal!
    Adorei a dica, o seu blog é bom vc tem que voltar rs

    ResponderExcluir
    Respostas
    1. Tatah, obrigado!

      Estou tentando voltar mas, meu blog não tem mais a visibilidade que tinha antes.
      Por conta do trabalho e estudos ficou meio complicado pra mim!

      Mas obrigado pelo incentivo é importante pra mim! rs

      Abraços!

      Excluir
  22. Tem como colocar essa numeração nas páginas de comentários do blog?

    ResponderExcluir
  23. cara MUITOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO OBRIGADO

    ResponderExcluir
  24. Massa , vlw estava procurando a algum tempo e conseguir ^^
    www.sabinocds.com.br

    ResponderExcluir
  25. nosso gostei muito deste blog este gadget ja esta no meu blog de uma olhada http://brtemplates.blogspot.com.br/ fico do jeito que eu queria vlw muito brigado

    ResponderExcluir
  26. meu blogger nao pula as paginas oque pode ter acontecido?

    ResponderExcluir
  27. Matou a pau!!!!!!! Sensacional, estava procurando por esta funcionalidade. De todas que encontrei a sua foi nota 1.000. Valeu e obrigado

    ResponderExcluir
  28. Funcionou, mas removeu a data que ficava antes das postagens

    ResponderExcluir
  29. em qual linha que se muda a cor dos numeros e a copr do link visitado??? alguem pode dar uma força ai?

    ResponderExcluir
  30. Wilamis Rogerio, no temtemplate isso não funcinou... o que faço?

    ResponderExcluir
  31. Estou muito feliz, optive sucesso exatamente como eu queria, foi muito útil, muito obrigada. Sucesso!
    DEUS ti abençoe!

    ResponderExcluir
  32. Boa postagem ,, a tempos eu estava atras de um codigo funcional ,, que não estivesse bugado ,,, e pra quem não tem "adicionar gadget em baixo das postagens" é o mesmo procedimento , é so adicionar um gadget em qualquer lugar do layout que o blogger ja reconhece e ja vai pra baixo das postagens automatico ,, vlw

    ResponderExcluir
  33. Dúvida ? Como mudo a cor tipo quero colocar o fundo laranja onde ta escrito Page 1 of 1

    ResponderExcluir
  34. Olá Wilams! Gostaria de saber se tem como alterar as cores para combinar com o layout do meu blog!

    ResponderExcluir
  35. Ótimo, valeu cara,
    mas teria como tirar a parte "page 1 of 30" e deixar só os números aparecerem ?

    ResponderExcluir
  36. Funcionou perfeitamente! Obrigado pelas instruções.

    ResponderExcluir

Visualizações dinâmicas

Arquivo do blog

Estamos aqui também

Copyright© 2010 - 2013 - Redes e Blogger - Todos os direitos reservados.

Redes e Blogger é orgulhosamente desenvolvido com Blogger


Termos de uso | Política de Privacidade | Mapa do blog

Template by Dicas Blogger | Modified by Wilamis Rogério