Navegação por páginas numeradas no Blogger
No Blogger, por padrão, você verá as mensagens postagens mais antigas e postagens mais recentes perto da parte inferior da página, que é útil aos visitantes do seu blog para navegar para outros posts do seu blog. Mas, o problema é que as pessoas mal percebem esses links de postagens antigas e recentes o que significa menos pageviews para o seu blog.
Então, para aumentar as visualizações de páginas do seu blog, você pode usar um hack para numerar a navegação por página.
Então, como adicionar isso ao seu blog do Blogger?
Primeiro faça um Backup do template do Blog
1. Entre na sua conta Blogger » Configurações » Postagens e comentários
Escolha o número de mensagens que você deseja exibir na página inicial
2. Agora vá em Modelo -> Editar HTML -> Proseguir
Desça até o fundo do código do modelo e encontre este código:
</body>
Cole este código acima da desta linha
<!--INÍCIO PAGINAÇÃO INFORLOGIA--> <script type='text/javascript'> var pageCount=5; var displayPageNum=3; var upPageWord ='Anterior'; var downPageWord ='Próximo'; </script> <script src='http://inforlogia.googlecode.com/files/paginacao01.js' type='text/javascript'/> <script src='http://inforlogia.googlecode.com/files/paginacao02.js' type='text/javascript'/> <!--FIM DA PAGINAÇÃO INFORLOGIA - www.inforlogia.com-->
Nesse código acima, edite a parte var pageCount=5 de acordo com o Passo 1. Ele determina o número de posts que, devem ser exibidos por página. (Tenha certeza, o número definido é o mesmo da Etapa 1)
3. Agora, a parte de estilo, fiz um estilo padrão para vocês, cole antes de </head>:
<style type='text/css'>
.showpage a:hover {
color: #FFFFFF;
background-color: #92416C;
}
// CÓDIGO PARA ESTILO DA PÁGINA SELECIONADA
.showpagePoint {
color: #FFFFFF;
background: #92416C;
border: 1px solid #92416C;
}
// CÓDIGO PARA OS NÚMEROS DAS PÁGINAS
.showpageNum a:link,.showpage a:link {
color: #000000 !important;
background-color: #92416C;
border: 1px solid #92416C;
}
// HOVER CODE PARA OS NÚMEROS
.showpageNum a:hover {
color: #FFFFFF !important;
background: #92416C !important;
border: 1px solid #92416C;
}
// CÓDIGO PARA OS BOTÕES ANTERIOR E PRÓXIMO
.showpageArea a {
border: 1px solid #92416C;
}
// HOVER CODE PARA OS BOTÕES ANTERIOR E PRÓXIMO
.showpageArea a:hover {
border: 1px solid #92416C;
color: #FFFFFF !important;
background: #92416C !important;
}
</style>
<!--FIM DA PAGINAÇÃO-http://inforlogia.com-->
Se quiser basta alterar esse ultimo código (css) ao seu gosto 
11/01/2012
- Atualizado após comentários informando que o código não mais funcionava (agradecimentos ao Luis Alberto Batista).
- Imagem do tutorial atualizada (agora mostrando a nova interface do Blogger).
Web Designer, Blogueiro, Microsoft Beta Tester, Analista de TI, criador do Inforlogia e viciado no Xbox 360 (ainda mais depois da chegada do Kinect).
