![[ Ferramentas Blog ]](/wordpress/wp-content/themes/fb5/images/logo.png){kind=logo}
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.
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 != "item"'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord ='Anterior';
var downPageWord ='Próximo';
</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:
Muito bom o post
vou deixar pra testar depois
porque eu escrevo mais de 1 artigo por dia !
Alguma sugestão de cor pra blogs de fundo escuro (preto, no caso)? Onde eu mudo as cores para obter um efeito melhor?
Obrigada
Excelente dica. Fiz e ficou bom. Obrigado.
gostei só queria mudar ao invès de (pages) Páginas
@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.
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!
::: No meu blog funcionou perfeitamente. Fiz as alterações de cores e personalizei. Bela dica. Recomendo!
@MARCOS LEMOS
Veja se este esta funcionando para Paginas. Como não consegui colocar no meu blogue, como Lhe tinha falado antes, não deu para testar.
Mas penso que consegui traduzir correcto.
Agora é só alterar o ficheiro
src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js'
Para
src='http://temavivo.freehostia.com/blogger-page-navi.v1.js'
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.
Eita que post bacana!
A cada dia o ferramentas fica melhor valeu!
Enviando essa dica por twitter agora mesmo!
Para mudar o pages para Páginas, vc terá que baixar o arquivo "http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js" 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' vc substituirá pelo novo endereço que é o caminho para onde vc hospedou o script alterado.
Abraços!
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!
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?
@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…
obrigado pela resposta foi rapido heim vlw.
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ê.
Aleluuuuia, todos os outros blogs de ajuda copiavam o mesmo codigo errado dos outros blogs e continuava a teia, você desfez ela 😀
Esse ai funciona Testado e comprovado se quiserem ver o resultado ta ae:
http://smasher-blog.blogspot.com
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.
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.
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.
É 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.
Gostei, deu uma cara mais legal (e sofisticada) ao template.
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.
Muito Obrigado!
Depois de muita procura sem sucesso, finalmente esse funcionou perfeitamente e sem erros!
Obrigado!
Muito bom =D Deu certinho, editei o arquivo para Paginas e coloquei naquele servidor WEBS grátis !!!
Parabéns pelo Blog 🙂
Muito bom o post.
Consegui direitinho e ja está postado.
Brigadão mesmo e vou sempre visitar o site assim que possível.
VlW
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.
Até que enfim um que deu certo, foi o mais simples que encontrei!! Deu tudo certo! Parabéns pelo post.
Brigada mesmo.
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.
Caro Marcos na primeira tentativa deu erro, tentei denovo tudo certinho, obrigado pela dica, parabéns.
Incrível como sempre posso contar com você para deixar meu blog cada vez mais pro!
Abs, F
Vai amigo consegui!!!! Abraços!!!
Eu tenho que admitir que às vezes se cansar de aprender a coisa toda , mas eu acho que você possivelmente pode adicionar algum valor. Bravo!
valeu pela ajuda ficou certinho no meu blog.
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
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!
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…
@Marcos Lemos and others…
Não achei um tutorial que coloque em Português “Pages”.
Há uma promessa de publicação qdo encontrar rs rs rs…
No é-terno,
muito bom funcionou perfeitamente obrigado
Trocar ‘Pages’ por ‘Páginas’ ,é bem simples,basta baixar o script http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js ,depois abrí-lo com o bloco de notas e localizar o trecho Pages (aparece duas vezes),basta alterar o nome,e se quiser,a cor tbm .Depois é só salvar ,hospedar e usar o novo link.
Já que não apareceu,vou deixar a imagem http://i42.tinypic.com/2vaz0k2.jpg
Perfeito, simples e fácil de colocar, amei. Aliás todas as dicas e tutoriais que vocês colocam aqui são perfeitos.
Obrigada.
Valeu, muito obrigado. Estava procurando a um tempo, e felizmente achei. 😀
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!
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?
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.
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
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.
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.