Numerar Páginas do Blog com JavaScript

 

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.Tutorial original e tradução do JavaScript feito por Mundo Blogger.

Download do Código Aqui: page-nav.js

1. Antes de começar, sempre é bom que você faça um Backup do seu template antes de prosseguir para evitar transtornos, caso algo saia errado.
2. Após Ter feito o download do código, hospede ele em um site de sua preferencia.
3. Depois copie o link e cole no local indicado no código a seguir.

1. No painel do blog clique em design > Editar HTML
2. Aperte CTRL + F e procure por:

 </body>

1. Depois copie o código abaixo e cole acima do </body>

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

1. Obs: Existem alguns parâmetros personalizáveis neste código. 
2. var pageCount=5; -> número de postagens que irá aparecer em cada pagina. Altere a numeração, se preferir.
3. Salve o template. 
4. Feito isso vamos corrigir o template.
5. No painel do blog clique em design > Editar HTML , marque "Expandir modelos de widgets" e procure cada ocorrência de :

 'data:label.url'

1. Incluindo as aspas, e substitua todas por:

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

1. O 5 é o número de posts a serem exibidos por página.
2. Agora só aplicar o css
3. Copie todo o código abaixo e cole-o antes de: 

 ]]></b:skin>

1. Código:

/* 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 */

}

1.  Agora só salvar seu template.
2. Caso tenha duvidas ou tenha algum erro no tutorial deixe um comentario que responderei o mais rapido póssivel.