Personalizando os links de navegação do Blogger

Os links de navegação, são aqueles 3 links que aparecem no final de cada página dos blogs do Blogger. Eles servem para auxiliar o visitante a “navegar” pelo arquivo do blog, avançando e retrocedendo as postagens do arquivo. 


Considero obrigatório, o uso dos links de navegação, já que sem eles ficaria muito complicado ter acesso a todos os posts que não se encontram na página inicial. 

• Como recuperar os links de navegação do Blogger

Muito bem. Com um pouco de CSS e com algumas mudanças no código original do Blogger, podemos fazer maravilhas com os links de navegação. 

Primeiramente, irei ensinar como mudar o código original. Antes de começar, faça um backup completo do template ou use um blog de testes. 

Entre em design>editar HTML, marque a caixa expandir modelos de widgets  e, usando o comando Crtl+F do teclado, procure por: 

<b:includable id='nextprev'> 
<div class='blog-pager' id='blog-pager'> 
<b:if cond='data:newerPageUrl'> 
<span id='blog-pager-newer-link'> 
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a> 
</span> 
</b:if> 
<b:if cond='data:olderPageUrl'> 
<span id='blog-pager-older-link'> 
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a> 
</span> 
</b:if> 
<b:if cond='data:blog.homepageUrl != data:blog.url'> 
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a> 
<b:else/> 
<b:if cond='data:newerPageUrl'> 
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a> 
</b:if> 
</b:if> 
</div> 
<div class='clear'/> 
</b:includable> 

Substitua tudo por: 

<b:includable id='nextprev'> 
<div class='blog-pager' id='blog-pager'> 
<b:if cond='data:newerPageUrl'> 
<span id='blog-pager-newer-link'> 
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' title='posts mais recentes'>&#171; página anterior</a> 
</span> 
</b:if> 
<b:if cond='data:olderPageUrl'> 
<span id='blog-pager-older-link'> 
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' title='posts mais antigos'>próxima página &#187;</a> 
</span> 
</b:if> 
</div> 
<div class='clear'/> 
</b:includable>

Salve o template.

Agora iremos aplicar o CSS.  Procure por este trecho: 

#blog-pager-newer-link {  

float: $startSide; 
} 

#blog-pager-older-link { 
  float: $endSide; 
} 

#blog-pager { 
  text-align: center; 
}

**Para blogs com template do Designer do modelo, o trecho é este:

.blog-pager {  
background: $(paging.background); 
}

.blog-pager-older-link, .home-link, 
.blog-pager-newer-link { 
  background-color: $(content.background.color); 
  padding: 5px; 
}

Substitua tudo por:

#blog-pager a { 
font-family: Arial; 
color: #333; /*Cor da letra*/ font-size: 13px; /*tamanho da letra*/ 
padding: 5px; 
text-decoration: none; 
background: #e6e6e6; /* cor do fundo*/ border: solid #ccc 1px; /*cor da borda*/ }

#blog-pager a:hover { 
color:#fff;  /*Cor da letra ao passar o mouse*/ background-color:#0071bb;  /*Cor da fundo ao passar o mouse*/ }

.blog-pager-older-link { 
float: right; 
}

.blog-pager-newer-link { 
float: right; 
}

Os ítens em vermelho, podem ser modificados livremente. Veja a tabela de cores.

Para colocar numeração nos links, vá até o Mundo Blogger: Numerar Páginas no Blog