Paginação Numeradas

Há o modelo convencional para navegar pelas páginas do Blog que consiste em três links, no final da página, onde o visitante pode passar para a próxima, voltar ou ir para a “Home”. Já mostramos aqui como substituir o texto por imagens. Algumas pessoas viram as modificações nesta função na nossa página, onde numeramos as páginas, e nos perguntam como fazer isso. Veja abaixo, como criar um sistema de paginação para o seu blog.
Você pode ver isso funcionando na segunda página do [ BLOG DO LIPPI ] e passar, página por página, numeradas, vendo todos os nossos artigos e saber quantas páginas temos. Então, vou mostrar como inserir este recurso em seu blog também. Esta é uma dica muito complexa e grande, exigindo atenção e cuidado, mas é fácil de fazer e dá um aspecto mais profissional para seu blog.
Siga as etapas dessa dica com muito cuidado e atenção e, antes de fazer qualquer modificação e começar, faça um backup do modelo de seu blog para pode restaurar o original caso algo saia errado ou não goste do resultado.

Instalando os códigos.


Vamos em “Layout” e “Editar HTML” no painel do seu blog. Não marque “Expandir modelos de widgets” – não precisa marcar essa opção para fazermos as modificações que seguem e ficará mais fácil de encontrar as linhas dos códigos indicados.
A primeira parte é inserir o código CSS na parte chamada de “Style”. Ela fica acima da linha “]]>”. Encontre essa tag e, antes dela, cole o código que segue:

.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;
}

Feito isso , agora procure por algo como:

E, abaixo disso, cole o JavaScript que instala a função e a executa. Como o código é muito longo, para ver ele, clique em "Abrir Código":

As partes indicadas em vermelho determinam, nessa ordem, a quantidade de artigos que aparecerá por página e, o segundo, a quantidade de números na lista.


Agora, salve o modelo e veja o resultado. Se algo sair errado, é só encontrar as marcações e apagar o que foi inserido. Teste de todas as maneiras para ter certeza de que o resultado é como deseja.