[Blogger - Hacks] - Widget de paginação para blogs do Blogger

Olá caro leitor, hoje mostrarei a você um hack bem interessante que substitui os botões de paginação padrão do Blogger, por botões de paginação com numeração. Esse gadget é muito útil, pois facilita a navegação dos leitores através dos artigos mais antigos. Este artigo surgiu de uma dúvida que me foi enviada através do Twitter, pelo leitor João Pedro. A instalação não é difícil, mas será necessário que você preste bastante atenção nas explicações para conseguir finalizar o tutorial com sucesso.

Adicionando o estilo CSS dos botões de paginação


Primeiramente, devemos adicionar o estilo CSS do botão de paginação. Esse estilo CSS é o responsável pela customização do botão, adicionando cores, tipo de fonte, tamanho de fonte, efeitos etc. Portanto, siga os passos descritos abaixo.

1. Faça login no Blogger e acesse o painel de controle do seu blog, depois vá no menu Modelo, clique no botão Fazer backup / Restaurar e faça uma cópia de segurança do seu template clicando no botão Fazer download do modelo completo.

2. Clique no botão Editar HTML para visualizar o código fonte do seu template. Em seguida clique dentro do código do seu template e pressione Ctrl+F para abrir a caixa de Busca do editor. Procure o código abaixo.

]]></b:skin>

3. Agora que você encontrou o código, você deverá adicionar o código CSS que criará os efeitos do botão. Para isso veja a tabela abaixo e escolha o estilo que mais lhe agradar. Ao clicar no botão para ver o código do estilo, você verá uma página de publicidade, espere 5 segundos e clique na imagem "Fechar Propaganda", que aparecerá no canto superior direito da tela. Feito isso, você será automaticamente direcionado para a página do estilo, aonde poderá copiar o código. Após fazer a cópia, cole-o imediatamente acima do código que você procurou no passo anterior.

Exemplo Código CSS

4. Caso você tenha conhecimentos em CSS, você poderá alterar os atributos como desejar, para que os botões se encaixem melhor no seu template. Para finalizar clique no botão Visualizar modelo e, se estiver tudo certo, clique no botão Salvar modelo.

Configurando o script para os marcadores


Se você quer que os botões de paginação apareçam nas páginas de marcadores também, siga os passos descritos abaixo.

1. Ainda na opção Editar HTML, clique novamente dentro do código do seu template e pressione Ctrl+F para abrir a caixa de Busca do editor. Procure o código abaixo.

'data:label.url'

2. Dependendo do que você tem instalado no seu template, este código poderá aparecer mais de 1 vez, então você deverá substituir todos os códigos que forem iguais ao mostrado acima, pelo código mostrado abaixo.

'data:label.url + &quot;?&amp;max-results=7&quot;'

3. Substitua o número destacado em vermelho, pelo total de artigos que você mostra em sua página inicial.

4. Para finalizar clique no botão Visualizar modelo e, se estiver tudo certo, clique no botão Salvar modelo.

Adicionando e configurando o script


Agora adicionaremos o script que será responsável por substituir o botão de paginação padrão do Blogger, pelo novo modelo de botões. Para isto, siga os passos descritos abaixo.

1. Acesse o painel de controle do seu blog, depois clique no menu Layout > Adicionar um Gadget > HTML/JavaScript.


2. Não coloque nenhum título para o gadget, apenas adicione o código mostrado abaixo, no campo de conteúdo do mesmo.

<!-- Script do widget de paginação -->
 
<script language='javascript' style='text/javascript'>
var pageCount=15;
var displayPageNum=15;
var upPageWord='Previous';
var downPageWord='Next';
</script>
<script language='javascript' style='text/javascript' src='http://blogergadgets.googlecode.com/files/blogger-page-nav-v2.js'></script>
 
<!-- Fim do script do widget de paginação -->


3. Agora, veja abaixo o que você pode configurar no script:

  • var pageCount=15: você deve alterar o valor destacado em vermelho, pelo número de artigos que você mostra em sua página inicial;
  • var displayPageNum=15: você deve alterar o valor em azul pelo número de páginas que serão listadas;
  • var upPageWord="Previous": altere o valor destacado em rosa pelo nome que você quer para o botão — normalmente o nome é "Anterior";
  • var downPageWord="Next": altere o valor destacado em laranja pelo nome que você quer para o botão — normalmente o nome é "Próxima".

4. Para finalizar, clique no botão Salvar.

Pronto, agora basta acessar a página inicial do blog e conferir se o código está funcionando de maneira correta. Gostou deste artigo, achou ele útil ou ficou com dúvidas? Participe deixando um comentário! E se você tem alguma sugestão de artigo, faça como o leitor João Pedro, e envia-a para nós!

Site de origem: Abu Farhan.

Atualização — 21.08.2011 às 22h15
O artigo foi atualizado para refletir mudanças realizadas no painel de controle da plataforma Blogger.
É terminantemente proibida a cópia de nossos artigos sem nossa expressa autorização!
Plágio é crime previsto no artigo 184 do Código Penal brasileiro e na Lei 9.610/98.
As informações contidas neste artigo estão desatualizadas? Notifique-me! Editar artigo
Igor Sousa é dono e criador do blog Hdblog (antigo Bloggando Na Web). Tem 24 anos, é paulistano e atualmente cursa o 8° Semestre em Ciências Contábeis. Blogar era apenas um modo de melhorar sua redação de texto, mas unida a sua vontade de ajudar as pessoas passou a ser um hobby.

Foram postados 15 comentários neste artigo!

  1. Gostamos muito e funcionou. Porém há um pequeno problema.
    De acordo que vai clicando nas páginas, nao vai sumindo as paginas anteriores e deixando apenas o Anterior!

    Nada mais, se puder de alguma forma ajudar ficaremos muito gratos :)

    ResponderExcluir
  2. Equipe Expert-Cheats: visitei o blog e realmente, há muitos botões e eles não vão sumindo.

    Olhando seu código fonte, percebi que você instalou tudo corretamente. Como eu não sou o criador do script e nem entendo muita coisa sobre este assunto, não saberia te dizer exatamente o que você deve fazer, mas tenho duas sugestões:

    1. Não adicione o caractere < (menor que) e > (maior que) nos botões, pois talves eles sejam interpretados como início de uma tag - veja que você colocou três vezes o caractere "<<<" e a palavra "Anterior" e o último < não apareceram.

    Se quiser mostrar uma “flexinha”, segure a tecla Alt e pressione (no teclado numérico) 174 para fazer o caractere: «; e 175 para fazer o caractere: ».

    2. Reinstale o script novamente, mas escolha um número menor para “displayPageNum”.

    Espero que isso ajude.
    Abraços.

    ResponderExcluir
  3. Obrigado Igor por nos dizer algumas sugestões, e rapidamente iremos lá mudar algumas coisas!

    E uma coisa estranha! Não sabia fazer a mini flechinha com o Alt+175 (»). Eu fazia ela para a direita utilizando Alt+187.

    Mas o engraçado é que aqui no formulário não consegui fazer com 187, no msn sim.
    Bom, deixamos isso queto rsrsrs.

    Abraços!

    ResponderExcluir
  4. Equipe Expert-Cheats: vejo que conseguiu resolver o problema!

    Pois é, existem algumas variáveis nas teclas de atalho, exemplo:

    Alt+175 resulta em: »
    Alt+174 resulta em: «
    Alt+0187 resulta em: »
    Alt+0171 resulta em: «

    Agradeço a visita!
    Abraços.

    ResponderExcluir
  5. Oi Igor, esse código, funciona tambem, com as páginas
    dos marcadores?

    ResponderExcluir
  6. Leninha: desculpe pelo inconveniente, esqueci de informar como fazer o botão aparecer na página de marcadores.

    Já atualizei o artigo, leia a parte: “Configurando o script para a página de marcadores”.

    Agradeço a visita e o comentário.
    Volte sempre.

    ResponderExcluir
  7. Dizem que dá erro quanto ultrapassa 500 posts. Neste dá erro ou algum outro tipo derro?

    ResponderExcluir
  8. Olá Thiago, eu desconheço este rumor e ainda não cheguei na marca dos 500 artigos. Infelizmente não tenho como lhe dar esta informação, mas vamos torcer para que não dê nenhum problema!

    ResponderExcluir
  9. tentei colocar o estilo CSS mas não funcionou ele não aparece na paginal do blogger!! tentei também o html/javascript e deu na mesma do CSS!!

    estou criando o blog agora e queria o sistema CSS nele...
    (e o blog é muito show, procurei em muitos lugares para colocar a nuve de tags e só funcionou com seu tutorial)
    vlw!! abrç

    ResponderExcluir
  10. ToM: tenha certeza de estar colocando o CSS no lugar certo - antes de ]]></b:skin>. E adicionar apenas o CSS não é o suficiente para que os botões apareçam no blog, é necessário adicionar o script que há no passo 2 da seção: Adicionando e configurando o script. Se o problema persistir entre em contato novamente!

    ResponderExcluir
  11. Consegui!! muito obrigado!!...
    ajudou muito mesmo os seus tutoriais..

    sucesso pra você!

    abraço!

    ResponderExcluir
  12. Grande Igor...
    Óia nós aki de novo.

    meu amigo os botões estão limitando a 72 páginas, tem como acertar isto ou ele tem este limite ?

    abraços

    ResponderExcluir
  13. Lanunes: não há limite de páginas, os botões aparecerão conforme você for adicionando artigos, mas para que a numeração apareça de maneira correta, é necessário que você configure o gadget corretamente no passo 3 do item “Adicionando e configurando o script”. Se o problema persistir informe o endereço do blog, para que eu possa dar uma olhada. Volte sempre! Abraços.

    ResponderExcluir
  14. Parabéns esse foi o único tutorial que funcionou no meu blog

    ResponderExcluir