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: Dicas para Blogs