Numerar Páginas no Blog Corrigido

Este artigo substitui o artigo anterior que disponibilizava um Código para numerar páginas no blogger, tendo em vista o não funcionamento do mesmo.
Confira abaixo o tutorial completo de instalação com o código corrigido e atualizado.

Este hack é bem mais simples de instalar pois ele vem com um JavaScript embutido em forma de url, o que o torna menos extenso e mais objetivo.
Este código foi modificado e traduzido por mim, a partir do criado e publicado no BloggerPlugins, já que o original é em inglês.

Só para lembrar, sempre é bom que você faça um Backup do seu template antes de prosseguir para evitar transtornos, caso algo saia errado.

1º Passo - Adicionar o arquivo JavaScript no seu template.

Faça download dos arquivo javascrit necessário para utilização deste recurso:Download
Hospede o arquivo em seu próprio site de hospedagem.
- Veja relação com opções de Sites para hospedagem de arquivos.
Após hospedar o arquivo, copie o link e acrescente a url dele no local indicado no código a seguir.

Vá até a aba design >> Editar HTML , não precisa marcar "Expandir modelos de widgets" e procure pela tag:
</body>

e ACIMA dela cole o seguinte código:

<script style="text/javascript">
var pageCount=5;var displayPageNum=5;var upPageWord="Voltar";var downPageWord="Próxima";</script>
<script style="text/javascript" src="URL-JAVASCRIPT-PAGE-NAV">
</script>

Existem alguns parâmetros personalizáveis neste código.
var pageCount=5; -> número de postagens que irá aparecer em cada pagina. Altere a numeração, se preferir.

2º Passo - Corrigir o template:

Vá até Layout >> Editar HTML , marque "Expandir modelos de widgets" e procure cada ocorrência de :

'data:label.url'

incluindo as aspas, e substitua todas por:

'data:label.url + "?&max-results=5"'

Aqui 5 é o número de posts a serem exibidos por página.

3º Passo - Aplicar os estilos CSS:

Vou disponibilizar aqui 3 modelos para você escolher. Escolha um, e se quiser, você pode editar as cores da maneira que preferir de acordo com o layout do seu blog.

Modelo 1


Se você quiser o modelo da figura acima, copie todo o código abaixo e cole-o ANTES da tag ]]></b:skin>

/* PageNav
--------------------------- */
.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc; /* edite a cor da borda se quiser*/
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc; /* edite a cor da borda */
background-color:#cccccc; /* edite a cor de fundo se quiser*/
}
.showpagePoint {
color:#333;  /* edite a cor da fonte */
text-decoration:none;
border: 1px solid #cccccc; /* edite a cor da borda se quiser*/
background: #cccccc; /* edite a cor de fundo se quiser*/
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; /* edite a cor da borda se quiser*/
padding:3px;}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;  /* edite a cor da fonte */
}

Modelo 2

/* PageNav
--------------------------- */
.showpageArea {
font-family:verdana,arial,helvetica;
color: #000;
font-size:11px;
margin:10px;  }
.showpageArea a {
color: #fff;
}
.showpageNum a {
padding: 3px 4px;
margin:0 4px;
text-decoration: none;
border-top:2px solid #000;
border-left:1px solid #000;
border-right:1px solid #000;
border-bottom:1px solid #000;
background: #666 url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp4.jpg) 0 -25px repeat-x;  }

.showpageNum a:hover {
border-top:2px solid #999;
border-left:1px solid #999;
border-right:1px solid #999;
border-bottom:1px solid #999;
background: #999 url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp4.jpg) 0 -50px repeat-x;
}
.showpagePoint {
color:#fff;
padding: 3px 8px;
margin: 2px;
font-weight: 700;
border-top:2px solid #000;
border-left:1px solid #000;
border-right:1px solid #000;
border-bottom:1px solid #000;
background: #000 url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp4.jpg) 0 0 repeat-x;
text-decoration: none;
}
.showpageOf{  margin:0 8px 0 0;
}

Modelo 3

/* PageNav
--------------------------- */
.showpageArea {
font-family:verdana,arial,helvetica;
color: #000;
font-size:11px;
margin:10px;  }

.showpageArea a {
color: #000;
text-shadow:0 1px 2px #fff;
font-weight: 700;
}
.showpageNum a {
padding: 3px 8px;
margin:0 4px;
text-decoration: none;
border:1px solid #999;
-webkit-border-radius:3px;-moz-border-radius:3px;
background: #ddd url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp1.jpg) 0 -50px repeat-x;
}
.showpageNum a:hover {
border:1px solid #888;
background: #ccc url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp1.jpg) 0 -25px repeat-x;
}
.showpageOf{
margin:0 8px 0 0;
}
.showpagePoint {
color:#fff;
text-shadow:0 1px 2px #333;
padding: 3px 8px;
margin: 2px;
font-weight: 700;
-webkit-border-radius:3px;-moz-border-radius:3px;
border:1px solid #999;
background: #666 url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp1.jpg) 0 0 repeat-x;
text-decoration: none;
}

Agora é só salvar e pronto! Já está tudo instalado!
Confira DEMO.

Lembrando que, a funcionalidade deste script pode variar de acordo com o template.Caso este script não funcione em seu blog, leia este artigo: Por que alguns scripts não funcionam no meu blog?, talvez você encontre resposta para o seu problema.

UPDATE em 18/11/10:
O arquivo para o funcionamento deste recurso estava hospedado no Dropbox. Devido a um problema no serviço de hospedagem do site Dropbox, disponibilizei o arquivo para download. Desta forma você poderá hospeda-lo onde preferir.




Fonte: BloggerPlugins