Como colocar numeração de páginas no Blogger

Melhorar a navegação do seu layout pode trazer um ganho relevante em matéria de qualidade de visitas. O tempo de duração de cada acesso pode aumentar e o número de páginas por acesso também. Criar um layout é muito mais complexo do que saber linhas de códigos, é entender como o usuário navega e transformar seu blog em algo bonito e usual.

Sabendo que o Blogger não disponibiliza algo fácil para seus desenvolvedores, é preciso se virar bem com JavaScript. Dessa forma, é possível colocar um menu de navegação de páginas numeradas no lugar dos típicos links “Próxima página” e “Página anterior”, deixando o blog mais usual e bonito.

Veja abaixo como implementar o recurso em seu blog:

1) Faça login no Blogger, entre em “Layout”;

2) Clique em “Adicionar um Gadget”. Escolha a opção “HTML/JavaScript”. Insira o seguinte código dentro da caixa aberta:

<style type="text/css">
#blog-pager{font-size:normal;padding:10px 0;clear:both;}
.showpageArea{font-family:verdana,arial,helvetica;color:#000;font-size:11px;margin:10px}
.showpageArea a{color:#000}
.showpageNum a{padding:3px 8px;margin:0 2px;text-decoration:none;border:1px solid #999;background:#ddd;color:#000;}
.showpageNum a:hover{border:1px solid #888;background:#ccc}
.showpageOf{margin:0 2px 0 0;padding:3px 8px;margin:0 2px;text-decoration:none;border:1px solid #999}
.showpagePoint{color:#fff;padding:3px 8px;margin:2px;border:1px solid #999;background:#666; text-decoration:none}
</style>
<script style='text/javascript'>
var numshowpage=4;
var postperpage =3;
var upPageWord="Anterior";
var downPageWord="Próxima";
var home_page="/";
var urlactivepage=location.href;
</script>
<script style='text/javascript' src='http://dl.dropbox.com/u/35784805/Mil%20Trucos%20Blogger/paginacionbloggermtb.js'></script>

Depois, faça as alterações que quiser no código, como:

• numshowpage: Número de páginas além da primeira disponível no menu de navegação;
• postperpage: Número de postagens por página;
• upPageWord: Texto para página anterior;
• downPageWord: Texto para próxima página.

Caso você entenda de CSS, modifique o código e deixe a aparência que desejar, depois clique em “Salvar”.

Créditos: CódigosBlogger