Numeração de páginas no Blogger

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.