Link de navegação numerado para Blogger

Siga o Ferramentas Blog: Canal no Youtube | Facebook | Twitter | Google+
Acesse AGORA: https://blogueiro.pro e se torne um Blogueiro de Elite.

Mais um artigo para ajudar você a customizar seu template no Blogger, agora mudando os links de navegação de página padrões do Blogger, numerando cada página. Tudo o que você puder fazer para facilitar a navegabilidade de seu blog é importante e uma dessas formas e permitir que o visitante percorras suas páginas uma por uma, passando pelo conteúdo que deseja. E o modelo que vou mostrar é como ilustra a imagem.

numbered-page-navigation-for-blogger

Introdução e recomendações.

Já ensinei um modelo aqui bem parecido com esse, mas muita gente teve dificuldades e ele apresenta mesmo um pequeno problema para blogs que publicam mais de 1 artigo por dia, mas se quiser testar também, o resultado é praticamente o mesmo:

Bem como já mostramos outras formas de mudar o link de navegação das páginas:

Vale lembrar também que, antes de fazer qualquer modificação em seu blog principal, teste em um blog preparado para isso e faça um backup completo do seu blog original para não passar sustos e poder reverter as mudanças caso algo não saia como desejado.

Inserindo paginação numerada no Blogger.

O modelo que vou mostrar abaixo eu encontrei no blog Blogger Widgets (em inglês). Veja o artigo original caso tenha alguma dúvida: Numbered Page Navigation For Blogger.

Proceda da seguinte forma:

1. Abra o painel do Blogger em sua conta e clique no menu “Layout” ~> “Editar HTML”. No código fonte de seu blog procure pela seguinte linha:

]]></b:skin>

2. Imediatamente ACIMA dela cole o seguinte trecho de CSS (que determina as caracteríticas dos elementos que serão usados):


.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}

4. Não altere nada aí e agora procure por </body> que estará bem no final do código-fonte. Também, imediatamente ACIMA dele, cole o trecho que segue:


<!-- Inicio do codigo de navegacao -->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord =&#39;Anterior&#39;;
var downPageWord =&#39;Próximo&#39;;
</script>
<script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/>
</b:if>
<!-- Final do codigo de navegacao -->

Repare que o número na linha marcada de vermelho determina quantos artigos serão exibidos por página, então coloque o número adequado para o padrão do seu blog (já tratamos sobre a quantidade de artigos por página aqui: Quantidade e tamanho das Postagens na primeira página).

Já o número na linha rosa é a quantidade de números que aparecerá nos links de navegação. Escolha a quantidade de acordo com a estética e largura da área de postagem.

5. Salve e veja o resultado em seu blog.

Quer ver outras formas de melhorar o layout de seu blog? Então leia também:

Já pensou em ser um(a) Blogueiro(a) mais Profissional?

Está cansado(a) de ser um blogueiro mediano(a) e que não tem resultados com seu Blog, não ganha dinheiro e não recebe as visitas que gostaria?

Você chegou aqui procurando como aprofundar seus conhecimentos em Blog, como Ganhar Dinheiro com seu Blog, aplicar as melhores técnicas de SEO, divulgar seu Blog e fidelizar seu público alvo. E posso te ajudar com essas coisas e muito mais, elevando o nível de qualidade do seu projeto.

Desenvolvi um curso completo, totalmente online, cobrindo tudo o que é necessário para um Blog atingir seu potencial máximo, detalhe por detalhe, que vão te tornar um Blogueiro de Elite:
  • Técnicas de produção de conteúdo
  • Fidelização do Público alvo
  • Divulgação e Técnicas de SEO
  • Métodos e técnicas de Monetização
Acesse AGORA: https://blogueiro.pro e se torne um Blogueiro de Elite.

Esta é sua chance de ser mais profissional e ter um blog eficiente, completo e que pode ser sua fonte de renda permanente. Sou Blogueiro desde 2007 e condensei todo este conhecimento dentro do curso Blogueiro de Elite para entregar a você.

49 Comentários

  1. Alguma sugestão de cor pra blogs de fundo escuro (preto, no caso)? Onde eu mudo as cores para obter um efeito melhor?
    Obrigada

    Responder

  2. @Vicente,

    Infelizmente não descobri como mudar "Pages" para "Páginas". Isso está no código do Java q não enho acesso. Mas assim que descobrir, publico aqui pra vcs.

    @Zailda,
    Todas as cores podem ser mudadas no CSS do código acima. Tudo o que tem:
    #cccccc
    #333
    #333333

    são indicação indicações de cores em código. Basta vc colocar a cor desejada.

    Responder

  3. E eu utilizo o outro numerador e nunca me deu problema e é muito bom, dá uma cara mais profissional para o blog. Recomendo que usem!

    Muito boa dica, adoro seu trabalho!

    Boa tarde a todos, abraços!

    Responder

  4. Outro post que me salvou….o seu sobre posts relacionados foi uma mão na roda, esse aqui sem se fala…..
    meu template sempre dá problemas com os códigos (só não mudo porque gosto dele xD)
    mais os seus funcionam perfeitamente!
    Parabéns pelo trabalho.

    Responder

  5. Para mudar o pages para Páginas, vc terá que baixar o arquivo "http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js&quot; para editá-lo, para isso basta alterar a extensão para .txt e abri-lo no bloco de notas dai dê um Control F e localizar "Pages" em 2 locais, altere para "Páginas" ou como preferir, salve o arquivo novamente e para a mudança surtir efeito, vc terá que salvar este arquivo em algum servidor, depois de salvo, altere no html do seu blog para o novo endereço no lugar onde está: 'http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js&#39; vc substituirá pelo novo endereço que é o caminho para onde vc hospedou o script alterado.

    Abraços!

    Responder

  6. Cara, finalmente funcionou!!! Estou a um tempão tentando botar no meu blog e nada até agora. Fui em dezenas (sem exagero) de sites e blogs e nada funcionava. Testei até uns q eu já tinha visto em seu blog. MUITO obrigado pelo excelente post!

    Responder

  7. eu fiz tudo certo coloquei o numeração diacordo com as minhas postagens EX: tenho 4 postagens por pagina então auterei o primeiro numero do codigo para 4 e o segundo tbm a 4 fiz virsa e verso tbm 4 a 5 e 5 a 4 mais da 126 pages sendo que tenho mais de 7.000 postagens no meu blog vc sabe pq isso acontece?ou o codigo soh suporta msm 126 pages?

    Responder

  8. @Equipe Hard,

    Infelizmente o Blogger tem alguns bugs (erros) quando tem mais de 5000 artigos em um blog. Há erros para os marcadores e a contagem de postagem. Pode ser que esse hack tb não suporte tantos artigos…

    Responder

  9. Cara Você é 10, em todas as procuras no google, yahoo…, achei aqui de cara, Recomendo muito você! CARA você salvou minha vida devo muito a você.

    Responder

  10. Isso aí cara,parabéns,eu estava atrás deste tipo de artigo a muito tempo e não existe essa de quem publica mais de um artigo por dia,comigo deu certinho,obrigado.

    Responder

  11. olá eu tenho um caso parecido com o do Equipe Hard, mais eu só tenho 3000 postagens, mesmo não sendo muito no caso da Equipe Hard, o meu tb fica com esse bug?
    si tivesse como arruma ficaria muito grato.

    Responder

  12. si vc não conseguir, vc pode tirar a contagem de paginas, pra ver si para com o bug.
    não vou mexer no java por ele é seu.

    Responder

  13. É uma boa pra quem não usa página estática e marcadores. Ou seja, pra blogs simples, o que é difícil um blog simples querer usá=lo. Mas, já é um avanço!
    Funcionou enquanto pode.

    Responder

  14. Luan,
    é bem provável que você não está esperando o upload das imagens terminar para serem inseridas. As imagens não baixam instantâneamente e leva alguns segundos (até minutos) para o upload de 10 imagens terminar para que fiquem todos disponíveis.

    Responder

  15. Testei e funcionou perfeitamente, muito obrigado, com certeza essa numeração de páginas deixa o blog com uma outra cara, parabéns pelo artigo.

    Responder

  16. Segui os passos aqui e deu muito certo de primeira sem stress algum.
    Muito obrigado pela informação, agora ficou bem mais agradável de fato a navegação em meu blog.

    Responder

  17. Amei!!!!! Há quanto tempo procurei como fazer isso e só achava explicações complicadas…e aqui levei menos de 5 minutos pra realizar o processo!
    E o blog fica com outra “cara”!!!

    @_maejestade

    Responder

  18. Não estou conseguindo de jeito nenhum alguem poderia fazer o teste na seguinte template: Mystique, acho que o problema é nela, se for vou ter que desistir de usar “Navegação Numerada”,
    Grata!

    Responder

  19. Não funciona bem quando clico em alguma página estática ou em um marcador. Uma pena o blogger não ter um dispositivo como esse, melhoraria muito a navegação, são pequenos detalhes que fazem o blogger perder espaço…

    Responder

  20. Fiz algo similar em um templete e funcionou, mas há duas semanas ele bugou de novo! Alterei para aparecerem 12 postagens por página na época, mas ele agora só mostra 4 e ainda são as mesmas que já estavam na página principal!

    Responder

  21. Olá! Tudo bem?
    Poxa, esse recurso não funcionou no meu blog. Simplesmente não apareceu nada. Eu não selecionei a opção “Expandir modelos de widgets”.Será que é isso?

    Responder

  22. Marcos, n sei o q fiz de errado, mas n consegui. revisei e fiz tudo certinho, mas no meu blog continua ao fim da pg inicial (mais antigas – início – mais recentes). Pensei em por aqui uma cópia do modelo do meu (editor de HTML) p vc dar uma olhada, mas nao sei c é seguro. outra coisa: acho q talvez aqui tenha errado: vc diz para ir em (layout / editar HTML), mas em layout eu só acho HTML/java alguma coisa, que já é dos gadgest que já estão em uso no blog. O meu editor de HTML está lá em (modelo). Cara, já fz uns dias q stou quebrando a cabeça cm isso e nao consigo por um link de navegação com números. O q será q stá me faltando? valeu.

    Responder

  23. Só uma dica:

    Em blogs com dominio personalizado não funciona se o script for hospedado tanto no google code quanto no google sites 🙂

    Eu uso a anos nos meus blogs mas hospedo o codigo no dropbox, porem ele é meio lento dai estava aqui procurando por outra alternativa rs

    ótimo post!

    [ ]s

    Responder

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

    Responder

    • Não é o caso deste aqui. Sempre tomo o maior cuidado com essas coisas antes de ensinar algo aqui e entregar os códigos. Tudo é devidamente testado antes de ser ensinado.

      Responder

Deixe um comentário

Ao comentar você concorda com nossa Política de Comentários.