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

by Matheus mota 03:58 0 Comments
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.
Paginação Blogger
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>
inserir código html paginas
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: Dicas para Blogs

0 Comentários