Link de navegação numerado para Blogger

Mais um artigo para ajudar você a customizar seu template no Blogger, agora mudando os links de navegação de página padrões do Blogger, numerando cada página. Tudo o que você puder fazer para facilitar a navegabilidade de seu blog é importante e uma dessas formas e permitir que o visitante percorras suas páginas uma por uma, passando pelo conteúdo que deseja. E o modelo que vou mostrar é como ilustra a imagem.

Introdução e recomendações.

Já ensinei um modelo aqui bem parecido com esse, mas muita gente teve dificuldades e ele apresenta mesmo um pequeno problema para blogs que publicam mais de 1 artigo por dia, mas se quiser testar também, o resultado é praticamente o mesmo:

• Paginação Numerada para Blog

Bem como já mostramos outras formas de mudar o link de navegação das páginas:

• Personalizar Links de Navegação do Blogger

 

Vale lembrar também que, antes de fazer qualquer modificação em seu blog principal, teste em um blog preparado para isso e faça um backup completo do seu blog original para não passar sustos e poder reverter as mudanças caso algo não saia como desejado.

 

Inserindo paginação numerada no Blogger.

O modelo que vou mostrar abaixo eu encontrei no blog Blogger Widgets (em inglês). Veja o artigo original caso tenha alguma dúvida: Numbered Page Navigation For Blogger.

Proceda da seguinte forma:

 

1. Abra o painel do Blogger em sua conta e clique no menu “Layout” ~> “Editar HTML”. No código fonte de seu blog procure pela seguinte linha:

 

]]></b:skin>

 

2. Imediatamente ACIMA dela cole o seguinte trecho de CSS (que determina as caracteríticas dos elementos que serão usados):

 

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}

 

4. Não altere nada aí e agora procure por </body> que estará bem no final do código-fonte. Também, imediatamente ACIMA dele, cole o trecho que segue:

 

<!-- Inicio do codigo de navegacao -->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord =&#39;Anterior&#39;;
var downPageWord =&#39;Próximo&#39;;
</script>
<script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/>
</b:if>
<!-- Final do codigo de navegacao -->

 

Repare que o número na linha marcada de vermelho determina quantos artigos serão exibidos por página, então coloque o número adequado para o padrão do seu blog (já tratamos sobre a quantidade de artigos por página aqui: Quantidade e tamanho das Postagens na primeira página).

Já o número na linha rosa é a quantidade de números que aparecerá nos links de navegação. Escolha a quantidade de acordo com a estética e largura da área de postagem.

 

5. Salve e veja o resultado em seu blog.

 

Quer ver outras formas de melhorar o layout de seu blog? Então leia também:

• Customizar, modificar e criar Templates para Blogger
• Como criar Template para Blogger - Designer do Modelo
• Biografia do autor do Blog no rodapé dos posts para Blogger