Numeração de páginas no Blogger

sexta-feira, 8 de abril de 2011

Este é um código bem legal para você inserir em seu modelo padrão de blog na plataforma Blogger, você poderá então, modificar a forma como o leitor navega pelas páginas mais antigas de seu blog.
Imagem representativa
Vale lembrar que há outras formas de personalizar este recurso, mais optamos por mostrar este pois ele carrega mais rápido na página, não contém imagens e sim CSS.

ATENÇÃO: Atualmente este código não está mais funcionando devido a mudanças no código do Blogger. Aguarde novo artigo.

Inserindo o código na prática

  1. Logue no Blogger, navegue até Design > Editor HTML
  2. Salve um modelo do seu blog em seu HD, faça backup
  3. Localize o campo 'Expandir modelos de Widgets' e ative-o
  4. Agora localize na página a linha:
    ]]</b:skin>

Acima desta informação cole o seguinte código CSS:

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

Se você souber editar HTML, poderá mudar as cores dos links (representados pela linha 'Color' e a edição deve ser feita em hexadecimal). Agora é a parte do JavaScript para a ação acontecer em seu blog. Ainda na mesma tela, localize o seguinte código (linha):

</body>

Imediatamente acima deste código cole o seguinte:

<!-- Script numeração pág -->
<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>
<!-- FIM Script numeração pág -->

A cor em vermelho determina quantos artigos serão exibidos por páginas depois que usar o recurso, ou seja, na página inicial fica a quantidade que você configurou no painel, mais quando a pessoa clica na página '2' por exemplo, aparecerá a quantidade indicada.
A linha em Azul representa a quantidade de links que irão aparecer na navegação, recomendamos que você use a quantidade conforme o seu espaço e estética do blog para que não fique feio.

Agora é a hora de salvar tudo e ver como ficou. Lembre-se que como o arquivo é em CSS ele busca informações de fonte do seu blog, ou seja, a imagem no topo da postagem é literalmente representativa e ele pode ser da mesma fonte e estrutura de links do seu blog.

15 comentários:

  1. Muito bom esse tópico, acabei de implementa-lo no meu blog, show de bola, abraço arruma blog :]

    ResponderExcluir
  2. Olá Os botões Inicio, postagens recentes e postagens anteriores não aparecem. Já tentei até colocar numeração nas paginas e mesmo assim nada deu certo.
    Na verdade , acontece que, ao começar o carregamento da página inicial do meu blog, o link "Postagem mais antiga" aparece e, depois de carregada, some. Todas as vezes que carrego essa página inicial ocorre esse processo de "esconde, esconde". Em relação as págians internas, aparecem os links normalmente.
    Alguém pode mim ajudar??? Agradeço desde já.
    Meu blog é: http://minhavidacomoednaldo.blogspot.com/

    ResponderExcluir
  3. Adorei as dicas. Coloquei em meu Blog, porém quando clico em próximo, o "next" aparece abaixo da linha. É normal isso?
    http://mulheresqueusam.blogspot.com/

    ResponderExcluir
  4. quando vou slavar,apareçe escrito: "Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente.
    Mensagem de erro em XML: An invalid XML character (Unicode: 0x4) was found in the CDATA section."

    O QUE EU FAÇO??

    ResponderExcluir
  5. Muito legau esse blog, e suas dicas se puder visita lá http://perezpiadas.blogspot.com/
    vlw.

    ResponderExcluir
  6. Valeu, deu certo, só que não encontrei ]] a ir procurei por ]]> a ir deu certo, será que vc não está esquecendo de colocar um > a mais?
    Meu blog é este: http://www.itapiunainforma.co.cc/
    Aguardo por um retorno seu, por favor.

    ResponderExcluir
  7. Para Itapiuna

    o código que apresentamos ao leitor para criar o numerador de página foi criado por um desenvolvedor norte-americano. Em muitos testes ele funcionou normalmente daquela forma. Com algumas recentes mudanças da Google sobre a plataforma Blogger pode ser que alterações devam ser feitas mais não ficamos sabendo ainda. Se desejar pode fazer um novo comentário falando da sua experiencia em nosso blog e compartilhar isso com outros colegas blogueiros. Ficaremos felizes. Abraço e sucesso.

    ResponderExcluir
  8. Boa Tarde, eu inseri o cógigo em um Blog de Testes da forma como vc orienta, não tive erros de compilação após salvar, mas ao visualizar não houve resultados, é como se o modelo não tivesse sido alterado. Vc tem alguma sugestão? O Script remoto continua válido?
    O Blog em questão é http://blogmarciart.blogspot.com.br/, meu email: marcia.r.tedeschi@gmail.com

    ResponderExcluir
  9. Eu de novo... só para acrescentar... embora a numeração não apareça na tela, pois continua aparecendo "postagem mais antiga", os saltos de pagina não estão sequenciais, pulando 3 a 5 posts ... para frente/para trás.
    Parece tb que houve alguma mudança no blogger... vc não acha ]], mas ]]> , ok!
    marcia.r.tedeschi@gmail.com

    ResponderExcluir
    Respostas
    1. Tedeschi analizamos o ocorrido e em nosso blog também deu o mesmo erro. Acreditamos que a ultima mudança no código do Blogger fez o ‘problema’ ocorrer e de forma involuntária.
      O Blogger inseriu novos códigos para página de Erro 404 e outros aprimoramentos em SEO e isso provavelmente fez o encadeiamento de erros.
      Atualizaremos o artigo a partir do seu comentário e nos comprometemos a criar um novo artigo falando sobre novas soluções.

      Excluir
    2. Bem, já normalizou. No meu blog eu recoloquei parte do código da mesma fonte e deu certo, conforme pode ver no final da página inicial. Qualquer coisa, cliquem na atribuição do numerador

      Excluir
  10. nao deu certo no meu...
    faço todos os passos exatamente como foi dito..
    mas nao funciona...
    existe outra forma???

    www.suarevista.blogspot.com

    ResponderExcluir
    Respostas
    1. Acho que até existe algum outro código ou 'programinha' mas não sei. Como a maioria é em inglês, então fica mais difícil. Boa sorte Filipe

      Excluir

Use este espaço para perguntar, questionar ou dar algum complemento sobre o artigo em questão. Todos os comentários publicados no Arruma Blog são de inteira responsabilidade dos seus respectivos autores. A finalidade do comentário é proporcionar ao leitor o poder de resposta sobre a postagem apenas. Neste campo não será aprovado comentários para publicar link e/ou material com conteúdo pornográfico de qualquer espécie, discriminatório ou ofensivo de qualquer natureza; que enviar informações sobre atividades ilegais e/ou incitar crimes ou violência. Para finalidades comerciais ou contato direto com o autor damos a opção de 'entrar em contato no topo da página'.

É expressamente proibido utilizar o espaço de comentários para engajar-se em atividades de cunho comercial, como vender produtos, procurar anunciantes e patrocinadores, divulgar informações pessoais de contato, além de veicular banners de qualquer espécie. Também serão apagados comentários de auto-promoção ou que não sejam pertinentes ao artigo em questão.

Todos os comentários são moderados e poderão ser excluídos caso sejam considerados inadequados, ofensivos ou alheios ao objetivo do blog. Este é blog é protegido pela lei de direitos autorais vigente no Brasil.


















 
Arruma Blog © 2009 - 2013 | Desenhado por Bubble Shooter | Direitos reservados | Obrigado pela visita