Página Numerada

Nesse artigo vou ensinar como aplicar o hack das Páginas Numeradas

Primeiro vamos ter que adicionar o estilo no css, vá em DESIGN > EDITAR HTML e procure pela linha:

]]></b:skin>

acima dela adicione todo esse código:

/* Page Navigation
----------------------------------------------- */
#blog-pager {
float: center;
}
.showpageArea {
margin: 10px 0;
}
.showpageArea a {
text-decoration: none;
}
.showpageNum a {
font-size:10px;
padding: 4px 8px 4px 8px;
margin: 2px;
text-decoration: none;
border: 1px solid #282828;
color: #000;
background-color: #ffffff;
}
.showpageNum a:hover {
border: 1px solid #333;
color: #000;
background-color: #cccccc;
}
.showpagePoint {
font-size:10px;
padding:4px 8px 4px 8px;
margin:0 5px 0 5px;
font-weight: bold;
border:1px solid #282828;
color:#000;
background-color: #cccccc;
text-decoration: none;
}
.showpageOf {
font-size:10px;
padding: 4px 8px 4px 8px;
margin: 5px;
color: #ffffff !important;
border: 1px solid #282828;
background-color: #838383;
}
.showpage a {
font-size:10px;
text-decoration:none;
border: 1px solid #282828;
padding: 4px 8px 4px 8px;
}
.showpage a:hover {
text-decoration:none;
border: 1px solid #282828;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#838383;
}

Após fazer isso procure pela linha:

</body>

e adicione todo esse código acima dela:

<!--Page Navigation Starts-->
<script align='center' type='text/javascript'>
var pageCount=3;
var displayPageNum=15;
var upPageWord =&#39;Voltar&#39;;
var downPageWord =&#39;Próximo&#39;;
</script>
<script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v2.js' type='text/javascript'/>
<!--Page Navigation Ends-->

var pageCount=3; // é quantidade de página por numero , exemplo: Na pagina 1 vai ter 3 paginas , quando adicionar a quarta pagina aparece a página 2 e assim sucessivamente

var displayPageNum=15; // Numero de Páginas Numeradas que irá aparecer

Resultado final:

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

_____
Crédito: K1R4

O Fundo tem que ser necessariamente com o fundo branco ou tem como eu add Color: # e a cor do fundo?

Pode ser alterado no código CSS