Colocar Gadget com Numeração das Paginas do Blog

Encontramos um código de gadget de numeração das paginas do blogger. Nós já publicamos anteriormente sobre esse assunto e muita gente pergunta sobre isso tanto que o tutorial sobre: Numeração nas Páginas do Blogger têm mais 350 comentários contando os comentários do blogger e facebook juntos. Por causa disso vamos mostrar um código mais simples de instalar no seu blog e que nos testes que fizemos funcionou bem em vários templates.

gadget numero de paginas no blog

Mas antes de colocar o código no seu blog você deve verificar nas configurações do Blogger o numero de postagens na pagina inicial do blog e depois colocar no lugar do numero 3 nesta linha do código:
var postperpage =3;

E somar mais um e colocar nesta outra linha do código:
var numshowpage=4;
Ou seja, aqui é numero 4 porque em nosso exemplo usamos 3 na outra configuração, mas poderia ser qualquer quantidade de postagens que você tenha configurado no seu blog.

Agora vamos instalar esse gadget com a numeração das paginas no seu blog entre na pagina modelo, adicionar gadget, escolha a opção html/javascript e use o código abaixo:
<style type="text/css">
#blog-pager{font-size:normal;padding:10px 0;clear:both;}
.showpageArea{font-family:verdana,arial,helvetica;color:#000;font-size:11px;margin:10px}
.showpageArea a{color:#000}
.showpageNum a{padding:3px 8px;margin:0 2px;text-decoration:none;border:1px solid #999;background:#ddd;color:#000;}
.showpageNum a:hover{border:1px solid #888;background:#ccc}
.showpageOf{margin:0 2px 0 0;padding:3px 8px;margin:0 2px;text-decoration:none;border:1px solid #999}
.showpagePoint{color:#fff;padding:3px 8px;margin:2px;border:1px solid #999;background:#666; text-decoration:none}
</style>
<script style='text/javascript'>
var numshowpage=4;
var postperpage =3;
var upPageWord="Anterior";
var downPageWord="Próxima";
var home_page="/";
var urlactivepage=location.href;
</script>
<script style='text/javascript' src='http://dl.dropbox.com/u/35784805/Mil%20Trucos%20Blogger/paginacionbloggermtb.js'></script>

Clique para salvar o gadget e pronto. Mas você pode personalizar esse gadget de numeração de paginas do blogger fazendo uma formatação especial nos botões trocando as cores de fundo, estilo e cores das fontes e bordas da numeração de pagina usando estilos CSS, veja o que faz cada linha de código e depois algumas dicas de CSS e formatação de texto:

.showpageNum a - links das outras paginas

.showpageNum a:hover - efeito quando o mouse está sobre o link

.showpagePoint - pagina atual

Em cada uma delas você pode formatar como quiser alterando os estilos CSS:

background - cor de fundo. Se quiser trocar a cor é só trocar os números que aparecem depois do sinal #. Veja aqui o Código das Cores.

border - formatação das bordas, leia aqui um tutorial sobre Colocar ou alterar as bordas

color - cor dos números. Aqui o funcionamento é igual à cor de fundo para trocar é só precisa colocar o código de outra cor. Leia também sobre Formatação Especial nos Textos das Postagens.

Veja outros acessórios uteis para seu blog:
Código da Barra de Recomendações do Facebook (Posts Recomendados)
Personalizar o Link ou usar Imagens no Hack Resumo da Postagem (Leia mais)
Gadget com Botões Flutuantes de Redes Sociais no Blogger
Como Colocar Texto em Movimento (Letreiro Animado) no Blog

Esse código é bem mais fácil de colocar pois não há necessidade de editar o html do blog por isso voltamos a esse assunto. Afinal sempre é importante achar um jeito mais fácil e rápido de fazer as coisas que precisamos ou queremos modificar no blog.

73 comentários:

  1. Fabiano,
    Realmente este código é mais fácil de usar, tanto é, que eu testei no me blog www.bloguetter.blogspot.com.br)e ficou muito bem. Mas eu estou usando aquele outro código mais complexo das numerações de páginas do blog (no HTML), se eu apagá-los, vai alterar alguma coisa no Gadget?

    ResponderExcluir
  2. Fabiano meu velho tu é D+ estava procurando um desses já algum tempo valeu ficou muito bom valeu.

    ResponderExcluir
  3. Enricks Pre se já está usando o outro código e funciona bem acho que não deveria trocar.

    apenas copie esse código e anote o link desta pagina para caso queira usar quando trocar o template ou em outro blog.


    se quiser mesmo apagar faça um backup do seu template antes para não perder nada caso tenha algum problema, mas acredito que não terá problemas se apagar o outro código

    ResponderExcluir
  4. Eu não entendi muito bem como que troca as cores. Help me please!

    ResponderExcluir
  5. Não precisa mais, eu já consegui. Mesmo assim, obrigada. Você sempre dá ótimas dicas.

    ResponderExcluir
  6. fabiano ate quantas postagens esse codigo funciona sem bugs

    ResponderExcluir
  7. Euzilene tentei colocar a explicação separando os nomes dos estilos e a formatação talvez por isso ficou meio confuso.

    mas a idéia é que pode formatar cada um dos estilos como desejar.

    ResponderExcluir
  8. Zaraki Scofild não sei dizer se existe um limite de postagens.

    mas nos testes que fiz não apresentou nenhum problema

    ResponderExcluir
  9. Olá Fabiano, em todos os meus blogs que adicionei o código deram certo, só no blog www.facaconcurso.com que apareceu um pequeno quadrado, e quando a gente clica nesse quadradinho aparece uma página só com esse gadget. Será algum problema no template? Tem como arrumar isso?

    ResponderExcluir
  10. deve ter algum outro código gerando erro ...

    quanto mais scripts usa na pagina mais chances de erros.

    ainda mais em templates personalizados

    ResponderExcluir
  11. Fabiano eu vi o número de postagens na página inicial, coloquei, somei mais um e coloquei na outra linha, mas apareceu números 1 de 1, quando coloco os números 3 e 4 como no seu código, fica 1 de 11, o que pode ser?
    Obrigada.

    ResponderExcluir
  12. os numeros 3 e 4 tem relação com a quantidade de posts que seu blog mostra na pagina inicial.

    então precisa configurar igual é no seu blog.

    se alterar os numeros também varia o numero de paginas da numeração, afinal se tiver 100 posts e dividir em paginas de 10 cada uma precisa de 10 paginas, mas se usar paginas com 5 posts precisará de 20 paginas para as 100 postagens

    ResponderExcluir
  13. Olá gostaria de saber como faço para colocar este html? http://s16.postimage.org/708z629cl/imagem.jpg

    ResponderExcluir
  14. Letícia Silva no momento não tenho códigos prontos para fazer aquilo, mas depende de que tipo de conteudo é na imagem.

    acho que não são as postagens pois não tem lugar para comentários nem outra coisa qualquer.


    veja se é isso que procura: Criar um menu expansível no blog

    ResponderExcluir
  15. Eu achei no site de séries do sbt! e q serve para esconder textos... olha http://www.sbt.com.br/series/darkblue/episodios/

    ResponderExcluir
  16. Obrigada Fabiano, deu certo.

    ResponderExcluir
  17. ñ entendi alguem me explica a primeira parte lá onde se fala do numero 3 ??

    ResponderExcluir
  18. o numero 3 é a quantidade de postagens na pagina inicial do seu blog, ou seja tem que usar o mesmo numero de posts que configurou no seu blog

    ResponderExcluir
  19. Não precisa ser adicionado no gadgets HTML/ JavaScript pode ser adicionado também no editar HTML desde que posicionado abaixo da tag head

    ResponderExcluir
  20. Nossa muito obrigado, ficou sensacional, tava procurando isso faz meses!
    Ficou muito bom no meu blog: www.speedyflash.com.br
    Observação: se colocar qualquer numero maior que 8 no "var numshowpage=4;" vai aparecer uns bugs dependendo do tamanho da pagina do blog!!!!

    ResponderExcluir
  21. Fabiano,

    Percebi que neste código você hospedou o javascript no dropbox. Por que a preferência? Ele tem algo bom para este ramo na blogosfera?

    Abraços

    ResponderExcluir
  22. é uma hospedagem gratuita... mas se tiver hospedagem própria com certeza é melhor

    ResponderExcluir
  23. Num blog meu deu ... mas fui testar no outro , não funcionou , poderia me ajudar?

    ResponderExcluir
  24. Caros colegas estou a procura do concerto de uma configuração de meu blog, não consigo estabizar o numero de postages na pagina inicial. Alguem pode me ajudar?

    ResponderExcluir
  25. em templates personalizados pode dar alguma diferença e erros no código... mas isso é complicado de achar.

    isso serve tanto para o comentário do Guilher456 como para o wveggi.com

    ResponderExcluir
  26. Fabiano,levei gadget acima.
    Html/javascript é muito mais fácil.
    Obrigada,bjs

    ResponderExcluir
  27. Mas que barbada!!! Tentei de tantas maneiras esse recurso e não tinha conseguido... quando vi esse tão simples jurei que não ia dar certo, mas funcionou perfeitamente!! Obrigada!!

    ResponderExcluir
  28. No meu blog www.irmaosgamerbr.blogspot.com, eu tentei mts vezes colocar mais sempre que eu entro no blog (tentei com varios pc's) só tem page 1 e a Proxima pagina' Desapareceu :(

    ResponderExcluir
  29. se for um template personalizado pode haver algum código gerando conflito

    ResponderExcluir
  30. Finalmente consegui aplicar esse código no meu blog! Por isso gosto dos tutoriais daqui: são simples e fáceis de entender :)

    ResponderExcluir
  31. Para min o Dicas para blogs e o melhor site do brasil.

    ResponderExcluir
  32. Não consegui colocar!
    Não achei essa "tag head" e tbm não encontro como adicionar gadget em html/javascript!
    Alguém pode me ajudar ??
    Obrigada!

    ResponderExcluir
  33. o adicionar gadget fica na pagina layout

    ResponderExcluir
  34. Assim, como eu coloco o numerador de paginas, em todas as minhas paginas do blog. Porque assim, esse e outros que ja testei só apareceram na pagina inicial?! como aparecer em todas?

    ResponderExcluir
  35. esse código é um gadget pronto então não temos como alterar o código

    ResponderExcluir
  36. ola muito obg por me ajuda adorei a dica entra no meu blog ai amigo valeuuuuuu
    http://blogdoterrorbarradobugres.blogspot.com.br/

    ResponderExcluir
  37. Muito bom! Teria como tira o quadro q fica Pagina: 1 de 13 e ficar so os numeros e o botao d passar e voltar?
    Obrigado

    ResponderExcluir
  38. tem como tirar aquele quadro Pagina 1 de 14 e ficar so os numeros e o botao proxima?

    ResponderExcluir
  39. esse código não permmite alterações deste tipo

    ResponderExcluir
  40. ai como botar paginas em outras paginas tipo pagina de games,programas etc....,é hurgente

    http://jogossrg.blogspot.com.br/

    ResponderExcluir
  41. matheus neste codigo não tem como colocar essas paginas.

    você tem que criar um menu no seu blog, veja aqui:
    Menu Horizontal com Efeitos no Blogger usando CSS

    ResponderExcluir
  42. Fabiano, o seu Blog e suas dicas sao um balsamo para nossas duvidas. Muito obrigado por nos orientar com suas dicas! Se alguem desejar ver como ficou esse codigo no meu blog deixo aqui abaixo o link.

    http://www.amuvuca.com

    ResponderExcluir
  43. Olá, Coloquei o gadget, a principio deu certo, aparece q quantidade de paginas, mas quando mudo para a segunda pagina ou na sequencia, não aparece mais, o que pode ser? www.dafnefranca.com.br / roberto@chriativos.com

    ResponderExcluir
  44. esses códigos apresentam falhas em alguns blogs, mas infelizmente não temos como resolver o problema

    ResponderExcluir
  45. o DB sempre ajudando muito com boas dicas, muito obrigado.

    ResponderExcluir
  46. Como sempre ajudando quem precisa!!
    Obrigada ficou lindo

    ResponderExcluir
  47. Era exatamente isso que eu estava procurando! Muito obrigado, meeesmo.

    ResponderExcluir
  48. Fabiano,eu de volta.Estou levando este Gadget,sou burra mesmo troquei o template,lá se foi o Gadget.
    Lindo fim de semana para vc,bjs

    ResponderExcluir
  49. fabiano tem como fazer aparacer a numeraçao nas paginas de inicial e categoria (marcadores), ou voce tem outro que faz isso aparece na pagina inicial e nas catagorias (marcadores) , agradeço desde ja

    ResponderExcluir
  50. Graça dos códigos para numeração de paginas que conheço acho que nenhum faz do jeito que você falou

    ResponderExcluir
  51. Fabiano , descobri um jeito de fazer aparacer a numeraçao nas paginas de inicial e dos marcadores , resovlvi compartilhar aqui para voce postar pro pessoal que quizer , pra aparecer numeraçao nos marcadores e so fazer uma pequena modificaço no template ,como no codigo antigo e so trocar o trecho
    data:label.url
    por
    data:label.url + "?&max-results=10"

    o 10 varia da configurarçao de cada pessoa , eu uso 10 postagens por pagina
    fica ai a dica pra quem quizer fazer tambem no meu ta funcionando beleza depois de muito quebrar a cabeça!

    ResponderExcluir
  52. Fabiano a minha pergunta é igual a do Zaraki Scofild, ele explicou mais eu não entendi tem como vc mim explica ai??eu quero sabe como fazer aparece os números quando ajeite aperta nos marcadores. explica ai vllw

    ResponderExcluir
  53. tem que procurar o código &max-results=

    no html do seu blog e alterar todos que achar (normalmente tem dois ou mais) usando a quantidade de posts que achar melhor.

    porém em alguns templates não funciona, principalmente se foram baixados prontos de algum site

    ResponderExcluir
  54. muito perfeito ,tutorial deu certinho me deixou feliz :)
    visita meu blog :
    http://carolineraquel.blogspot.com/
    bjos obrigada

    ResponderExcluir
  55. olá tudo bem? consegui fazer certo, no entanto a numeração de paginas não estão como exemplo acima ( 123...15) e sim (123456789101112131415) o que fazer? obrigado ...

    ResponderExcluir
  56. se a numeração ficou toda grudada é porque faltou o trecho do CSS que está no começo do código

    #blog-pager{font-size:normal;padding:10px 0;clear:both;}
    .showpageArea{font-family:verdana,arial,helvetica;color:#000;font-size:11px;margin:10px.............

    ResponderExcluir
  57. O endereço do script esta desativado e o gadget parou de funcionar e agora?

    ResponderExcluir
  58. Não consigo deixar o mesmo numero de post nas outras paginas como deixei na inicial. Como faço??

    ResponderExcluir
  59. tem um javascript externo que está com problema... por isso não funciona direito

    é que esse código é antigo e deve ter sido excluído do servidor... infelizmente não tem como recuperar

    ResponderExcluir
  60. NÃO CONSIGO COLOCAR NO MEU BLOGGER!!
    O QUE EU DEVO FAZER?

    ResponderExcluir
    Respostas
    1. esse código tem vários detalhes para você alterar, então veja se não apagou nenhum sinal por engano (este é o tipo de erro que mais acontece e o código não funciona)

      mas também existem alguns templates personalizados ou com outros códigos que gera conflito e neste caso não tem como resolver.

      Excluir
  61. Como fazer aparecer na pagina de marcadores?

    ResponderExcluir
  62. ele não aparece nos marcadores.

    não tem como fazer alterações no código.

    ResponderExcluir
  63. Atenção, tomem muito cuidado com estes gadgets numeradores de paginas para blogs, ja infectei meu blog Duas vezes com eles e quebrei a cabeça para descobrir, no começo eles funcionam bem que é uma beleza, após algum tempo o script deles começa a substituir os links do seu site e redirecionar seus visitantes para páginas de anúncio e páginas de donwload de programas maliciosos, não estou dizendo que o que você esta disponibilizando no seu blog é malicioso, mas os outros podem ser, TOMEM MUITO CUIDADO BLOGUEIROS ! fica o aviso.

    ResponderExcluir
    Respostas
    1. concordo com você com o passar do tempo as vezes scripts são apagados e geram problemas e o mesmo acontece com imagens hospedadas por outras pessoas.

      aproveitando seu comentário fiz uma postagem sobre o assunto:

      https://www.dicasparablogs.com.br/2014/04/problemas-erros-mudar-editar-template-blog.html

      obrigado pelo comentário (sugestão)
      abraços e sucesso com seu blog

      Excluir