Links de Navegação numerados para Blogger

Otimizar os links de navegação de seu Blog, ajuda a melhorar o seu layout e também a sua navegabilidade. Existem inúmeras formas de configurá-los. Desta vez, vim lhes mostrar um script que o metablog Abu Harfan disponibilizou, que permite configurar os links de navegação em páginas numeradas, como muitos blogs e sites fazem.


Existem inúmeras maneiras de configurar os links de navegação de seu Blog. Algumas destas, estão previstas nos links abaixo:
-> Alterando o texto dos links "Postagens mais antigas" e "Postagens mais recentes"
-> Customizando links de navegação com ícones


Ensinei como modificar os links de navegação de seu Blog, como mostrei nos artigos acima. Este script que foi criado por Abu Harfan, permite numerar os links de navegação, ou seja, ao invés de usar links como "Próximo" ou "Anterior", usaremos uma paginação mais complexa, onde exibe o número de páginas, e basta um clique em algumas delas para ir diretamente para ela. ANTES de iniciar o tutorial, você deverá configurar o número de postagens que aparecerá em cada uma das páginas do seu Blog, como ensinei nos artigos abaixo:
-> Configurando o número de postagens na página principal
-> Apresente um número específico de postagens por marcador


Também é de suma importância fazer o Backup de seu Blog, para proteger o template de problemas.
-> Faça backup de seu blog para proteger o seu template e seus gadgets


O número de postagens por página já foi configurado, e o backuo já foi feito, agora já será possível iniciar o processo de instalação dos links de navegação numerados. Primeiramente, você deve acessar o painel do Blogger e dirigir-se para: Layout -> Editar HTML. NÃO clique na opção "Expandir modelos de widgets", não será preciso ativar este comando. Pressione CTRL + F e procure pela seguinte tag:

]]></b:skin>

SUBSTITUA POR COMPLETO esta tag, pois colaremos ela novamente. Substitua ela pelo seguinte código CSS.

.showpageNum a { padding: 3px 8px; margin:0 4px; text-decoration: none; border:1px solid #999; -webkit-border-radius:3px;-moz-border-radius:3px; background: #ddd; } .showpageOf { margin:0 8px 0 0; } .showpageNum a:hover { border:1px solid #888; background: #ccc; } .showpagePoint { color:#fff; text-shadow:0 1px 2px #333; padding: 3px 8px; margin: 2px; font-weight: 700; -webkit-border-radius:3px;-moz-border-radius:3px; border:1px solid #999; background: #666; text-decoration: none; } ]]></b:skin>

Como pode notar, a tag está novamente no final do código, por isso não houve problemas em removê-la. O código CSS da paginação numerada já está concluído, agora devemos adicionar o código JavaScript. Para isso, pressione CTRL + F e procure pela seguinte tag:

</body>

Esta tag se encontrará no final de seu código fonte. Novamente, SUBSTITUA esta tag pelo seguinte código:

&lt;script type='text/javascript'&gt; var home_page=&quot;/&quot;; var urlactivepage=location.href; var postperpage=7; var numshowpage=4; var upPageWord ='<<'; var downPageWord ='>>'; &lt;/script&gt; &lt;script src='http://all-in-one-blogger-widget.googlecode.com/files/pagenaviv202-min.js' type='text/javascript'&gt;&lt;/script&gt; </body>

Substitua o número "7" destacado em vermelho, pelo número de postagens que foi configurado por cada uma das páginas de seu Blog. Salve o seu template, e veja que os resultados são satisfatórios. Caso ocorra algo errado, faça o upload de seu antigo template.