Como personalizar o navegador do Blogger

Sabe aqueles links que aparecem no rodapé da coluna dos posts nos blogs hospedados no Blogspot, que permitem avançar e retornar as páginas de postagem? Esse elemento de página chama-se navegador ou 'blog-pager'.

Por padrão são exibidos apenas os links: "Postagens mais antigas", "Início" e "Postagens mais recentes", centralizados e sem muito charme, assim:

Postagens mais antigas      Início      Postagens mais recentes

Já mostrei como personalizar o navegador do Blogger usando ícones intuitivos e mais recentemente também informei sobre o novo recurso de navegação em páginas numeradas, tão aguardado pelos usuários do serviço oferecido gratuitamente pela (empresa) Google.

Eu particularmente acredito que o recurso de navegação numerada não é o ideal para um site no formato blog. Pois o navegador não é exibido quando o usuário acessa uma página individual, apenas na home page.

Pensando nisso resolvi personalizar o blog-pager do Blogspot, seguindo um padrão usado por vários sites gringos, como o Gizmodo e o LifeHacker. Sem images ou arquivos JavaScript hospedados externamente, só no CSS.

O resultado, depois de concluída a configuração, é esse:

<< Seguinte >>

O que precisa ser feito:

• Substituir as definições CSS originais do blog-pager;
• Substituir o trecho HTML original do blog-pager.

Antes de começar:

• Faça um backup do seu template atual ou tente num blog testes;
• Leia o tutorial até o fim para ter certeza do que está fazendo.

1 - Localizar e substituir as definições CSS originais:
Acesse a área de edição do código do seu template, marque Expandir modelos de widgets e procure pelo trecho abaixo (use CTRL + F para facilitar):

#blog-pager-newer-link {
float: $startSide;
}
#blog-pager-older-link {
float: $endSide;
}
#blog-pager {
text-align: center;
}

Substitua tudo, sem dó nem piedade pelo código compulsivo disponibilizado abaixo. Não esqueça de alterar os valores destacados em vermelho, conforme o seu caso (O destaque em azul é uma correção. Caso esteja com problemas verifique se essas linhas estão de acordo):

#blog-pager a {
text-decoration: none;
padding: .2em 1em;
margin: .2em;
color: #000000; /* Cor do texto */
background-color: #FFFFFF; /* Cor de fundo */
border: 1px dotted #CCCCCC; /* Cor da borda */
}
#blog-pager a:hover {
color: #000000; /* Cor do texto */
background-color: #EEEEEE; /* Cor do destaque */
border: 1px dotted #CCCCCC; /* Cor da borda */
}
#blog-pager {padding:5px;text-align:right;float:right}
#blog-pager-older-link, #blog-pager-newer-link {text-align:right}

2 - Localizar e substituir o código HTML original:
Sem salvar ainda, vamos procurar pelo trecho de código HTML referente ao navegador de páginas do Blogspot:

<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>

Agora vamos fazer da mesma forma que fizemos anteriormente nas definições CSS. Substituir todo o trecho localizado, pelo código compulsivo personalizado:

<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='Página anterior'>&lt;&lt;</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='Próxima página'>Seguinte &gt;&gt;</a>
</span>
</b:if>
</div>
<div class='clear'/>
</b:includable>

Visualize para testar, se não ocorrer nenhum erro pode salvar e correr para o abraço...

Imagem: O Pirata