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.
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>
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
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!
Oi!!!
Coloca ótima dica nisso, acabei de colocar o código em meu site e está funcionando perfeitamente, espero que seja até que dure, kkkkk! Um abraço e parabéns pela dica aos idealizadores…
Adelson meu querido, também usava, mas como você falou: saiu do ar, agora ambos estão fora, infelizmenete! OH! E agora, quem poderá nos ajudar?
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
muito bom cara vc é fera.
Muito boa essa dica! Obrigada!
Meu modesto blog agradece ficou ótimo. Obrigado.
Perfeito! Thanks
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.
Aconteceu o mesmo comigo. Tirei do site depois que o Pagespeedy do google me recomendou 😉
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.
tks ;)….
Muito bom!!
Deu certinho eu aconselho!!
via 100% fiavel!! 😉
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
Funcionou perfeitamente, ótima dica.
Obrigado.
Um dos melhores blogs até agora..! Parabéns.. o código caiu como uma luva.!
Fiquem com Deus!
Muito obrigada Paulo! Agora meu blog está do jeito que eu queria.
fiz um template so estava faltando isso vlw
Amei o post!!!!!
Meu blog ficou show
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!
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!
Rapaz! Muito show essa postagem. Gostei demais. Muito, muito obrigado! Tu é o cara! 😀
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.
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 🙂
Renata,
esses templates cheios de javascript são cheio dessas frescuras, pois a estrutura é bem diferente, entende? É melhor alguém que entenda de HTML e javascript para arrumar para você.
abraços.
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!
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.
Olá, que bom que está dando tudo certo. =]
Então, o widget faz com que mostre 10 postagens por página. É assim mesmo.
abraços.
Ótimo post, Brigadão!
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.
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
Muito obrigada,por compartilhar tamanha informação.
Já estou usando, deu super certo.
Valeu!!!
Abraços da Bia!!!
Obrigada pela postagem. Este foi o único código que funcionou perfeitamente no meu blog.
Abraços e boa sorte!
adoro esse Blog de vc’s :), como já disse preciso muito da ajuda de vocês aguardo retorno.
SUCESSOOOO!!!! 🙂
Muito obrigada pela ajuda, funcionou muito bem. Vou compartilhar seu blog, parabens!!!
Abraço
Valéria
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.
Tenho esse codigo no meu site e parou de funcionar. alguma novidade?
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 ?
Comigo não funcionou, não apareceu nada…. uso o template Espetacular Ltda.
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?
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.
Funcionou apenas por algumas horas, depois não funcionou mais…
Não deu certo no meu blog, fiz tudo direitinho, qual será o problema? Desde já obrigada
Não consigo colocar a numeração no blog, tenho pouca experiência e já tentei 4 tipos de código diferentes e nada
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)
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.