Dominio: codigosblog.com.br
Chave: af255c39c6cbf2ba03ac5b531649215539d8d61a
Hora do cache: 1495741411
Vida do cache: 1495784611
Status: 1
Mensagem: Centive nao respondeu
Chave do Pedido: 11808bbc6205bade68f0b70c302eaa74d4305945
Chave do Produto: PROKEY
Scroll Top

Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Blogs,
SEO e Monetização.

Hospedagem - 728 x 90

Blogger layouts Postagens

Como colocar numeração de páginas no Blogger

Melhorar a navegação do seu layout pode trazer um ganho relevante em matéria de qualidade de visitas. O tempo de duração de cada acesso pode aumentar e o número de páginas por acesso também. Criar um layout é muito mais complexo do que saber linhas de códigos, é entender como o usuário navega e transformar seu blog em algo bonito e usual.

Sabendo que o Blogger não disponibiliza algo fácil para seus desenvolvedores, é preciso se virar bem com JavaScript. Dessa forma, é possível colocar um menu de navegação de páginas numeradas no lugar dos típicos links “Próxima página” e “Página anterior”, deixando o blog mais usual e bonito.

Paginação Blogger

Veja abaixo como implementar o recurso em seu blog:

1) Faça login no Blogger, entre em “Layout”;

2) Clique em “Adicionar um Gadget”. Escolha a opção “HTML/JavaScript”. Insira o seguinte código dentro da caixa aberta:

<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>

inserir código html paginas

Depois, faça as alterações que quiser no código, como:

  • numshowpage: Número de páginas além da primeira disponível no menu de navegação;
  • postperpage: Número de postagens por página;
  • upPageWord: Texto para página anterior;
  • downPageWord: Texto para próxima página.

Caso você entenda de CSS, modifique o código e deixe a aparência que desejar, depois clique em “Salvar”.

Créditos: Dicas para Blogs



De um play no vídeo abaixo e aprenda a Criar blogs Profissionais




Gostou deste artigo? Ajude nosso projeto.
Compartilhe em suas redes sociais nos botões abaixo:

46 Comentários

  1. Olá, Paulo!

    Ótima dica! Eu usava antes um script do Abu Farhan que saiu do ar. Este artigo caiu como uma liva para mim!

    Um abraço e obrigado por compartilhar!

  2. Ben disse:

    Tenho um problema, queria muinto colocar isso no meu, mais no meu blogger tem imagem no próximo, anterior e iniciar, sendo que quando coloquei esse código não teve efeito nenhum???? não apareceu a numeração de paginas

  3. Ana Araujo disse:

    Muito boa essa dica! Obrigada!

  4. Luis disse:

    Meu modesto blog agradece ficou ótimo. Obrigado.

  5. Anderson Curioso Bíblico disse:

    Fiquei feliz quando vi esse código , instalei e o vi funcionando, mas quando fui testar , começaram a aparecer problemas; e a té parou de funcionar durante os testes, como seu o código não estivesse instalado.

  6. Rodrigo disse:

    Cara, copiei o código e apliquei no meu blog em 30 segundos…. muito prática a dica.
    Belíssimo trabalho, você está de parabéns.

  7. Miguel disse:

    Muito bom!!
    Deu certinho eu aconselho!!
    via 100% fiavel!! 😉

  8. André Feipe disse:

    vlw cara vc é muito fera nunca me desepicionei com esse blog eu naum tinha como usa o java script naum ssei pq mas ela naum salva ai fui em editar html colokei atras do e ai deu bem certinho sem nenhum erro cara parabens pra vc sempre q eu precisa eu vo ta aki

  9. Marcelo disse:

    Funcionou perfeitamente, ótima dica.
    Obrigado.

  10. Um dos melhores blogs até agora..! Parabéns.. o código caiu como uma luva.!
    Fiquem com Deus!

  11. karen disse:

    Muito obrigada Paulo! Agora meu blog está do jeito que eu queria.

  12. felipe rocha disse:

    fiz um template so estava faltando isso vlw

  13. Secreta disse:

    Amei o post!!!!!

    Meu blog ficou show

  14. Sérgio disse:

    Pow Paulo…procurava há tempos esse código também…ficou muito bacana e sem querer “casou” com o novo template que estou preparando pro meu blog…obrigado de novo!
    Abraços!

  15. Wagner Toledo disse:

    Boa noite Paulo. Achei em suas dicas o que de fato etava procurando, deixou a intrface do meu blog mais profissional. Só que estou encontrando um problema. Não sei como atribuir cada número a lista de Autores. Por exemplo, cada Postagem indico apenas com a letra correspondente dos autores. Tem como corrigir esse problema?
    se quiser dê uma olha no meu blog que vc vai entender. Meu objetivo é eliminar a coluna alfabética à direita do blog.
    fico aguardando seu contato.

    Desde já muito obrigado!

  16. Weslley disse:

    Rapaz! Muito show essa postagem. Gostei demais. Muito, muito obrigado! Tu é o cara! 😀

  17. Adir disse:

    Gostei ficou legal em meu blog mais não consegui mudar a quantidade de pagina a serem ixibidas eu fiz tudo mudei os numeros etc. Mais não passou de 12 o numero disponivel de pagias para navegção.

  18. Renata disse:

    Usei em 2 templates ‘mínima’ e deu certo. Agora tentei usar em um template diferente e não funciona.

    ALGUÉM SABE O QUE FAZER?

    Grata 🙂

  19. Natasha disse:

    Eu testei mil e um códigos e nenhum prestou! Esse era o mais simples e foi o único que consegui fazer funcionar no meu blog! Muitooooo obrigada pela dica!

  20. Manasés disse:

    Esta era uma das minhas preocupações em usar o blog, estou querendo deixar o site mais profissional,eu tinha que fazer isto até que encontrei seu blog, agradeço,eu quero pedir para você me ajudar por favor na primeira pagina está com 10 postagens, e e não sei onde diminuir isto, só na primeira, nas outras eu fiz conforme a sua orientação. então fico no aguardo mais uma vez obrigado.

  21. Victor disse:

    Ótimo post, Brigadão!

  22. Grazi disse:

    Oi Paulo, muito bom o código! Mas ele só está funcionando na home do blogger, teria como eu aplicar o mesmo para o resultado das buscas pelos marcadores? Obrigada.

  23. paty disse:

    puxa taí mais uma dica muito bacana que não sabia como fazer principalmente porque sou iniciante ,mas sendo bem explicado a gente vai entendendo como funciona ,muito obrigada pelas dicas

  24. Muito obrigada,por compartilhar tamanha informação.
    Já estou usando, deu super certo.
    Valeu!!!
    Abraços da Bia!!!

  25. Nirma Regina disse:

    Obrigada pela postagem. Este foi o único código que funcionou perfeitamente no meu blog.

    Abraços e boa sorte!

  26. Marcony disse:

    adoro esse Blog de vc’s :), como já disse preciso muito da ajuda de vocês aguardo retorno.

    SUCESSOOOO!!!! 🙂

  27. Valeria Ferro disse:

    Muito obrigada pela ajuda, funcionou muito bem. Vou compartilhar seu blog, parabens!!!
    Abraço
    Valéria

  28. Olá amigo, venho lhe informar que o código javascript hospedado no Dropbox está fora do ar devido ao grande acesso ao sistema!

    Aparece a seguinte mensagem:
    Ligações públicos desta conta estão gerando muito tráfego e foram temporariamente desativado!

    Peço-lhe que me envie o arquivo “paginacionbloggermtb.js” por e-mail, obrigado pela atenção e aguardo respostas!

    Charles Wander.

  29. Massilon disse:

    Tenho esse codigo no meu site e parou de funcionar. alguma novidade?

  30. Adir Mota JR disse:

    Este sistema da certo por um tempo no blog ai do nada some e tenho que refazer o processo de volta .Oque será que deve ser ?

  31. BM disse:

    Comigo não funcionou, não apareceu nada…. uso o template Espetacular Ltda.

  32. Melina disse:

    Oie, pode me dar um help!?
    Segui todos esses passos do tutorial mas não apareceu nada!
    Já mexi nas cores, mas não aparece nada!!!
    O que eu faço?

  33. Vinícius disse:

    Olá Paulo, tenho certeza que o código irá funcionar perfeitamente, porém o link do js. no dropbox está offline pelo fato de ser muito utilizado. Existe a possibilidade de disponibilizar esse js. para download em outro servidor ? Desde já, obrigado.

  34. Edmir disse:

    Funcionou apenas por algumas horas, depois não funcionou mais…

  35. Não deu certo no meu blog, fiz tudo direitinho, qual será o problema? Desde já obrigada

  36. Adriana disse:

    Não consigo colocar a numeração no blog, tenho pouca experiência e já tentei 4 tipos de código diferentes e nada

  37. Evandro disse:

    Olá
    Estou com um problema q nao acho a resposta em lugar algum, se vc puder me ajudar…
    Na página inicial coloquei para aparecerem 48 postagens, blz, está td certinho
    Porém qnd clico em PROXIMA PAGINA, ou pagina 2, na proxima página aparece apenas 7 postagens, e vai indo d 7 em 7… como faço para aparecer as 48 em todas? nao acho isso em lugar algum
    obrigado. (blogger)

  38. Gilmar disse:

    Eu fiz uma mistura louca desses códigos com outros de outra página e deu tudo certo, mas o meu só funciona até a página 34 com 400 postagens e 10 por páginas, se acaso fazer mais postagens tenho de aumentar o numero de postagens por páginas, preciso resolver somente isso.

Para enviar seu comentário, preencha os campos abaixo:

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.