Personalizar Links de Navegação do Blogger

O roda-pé de todo template tem links de navegação que direcionam os visitantes para as páginas anteriores ou navegar de um artigo para o outro, anterior ou posterior. A grande maioria desses modelos de layout têm links em forma de texto e são pouco atrativos, o que acaba dificultando a vida do visitante. É possível modificar esses links e personalizá-los para melhorar a navegabilidade em seu blog. Veja como fazer.

Se você rolar a página do [ Ferramentas Blog ]  verá que estamos com um novo modelo de link de navegação e é exatamente esse resultado e modificação que queremos ensinar aqui hoje. Mas vamos aos primeiros passos.

• Antes de fazer qualquer modificação em seu Template, faça um backup de segurança: Backup no Blogger – seu Blog seguro.
• Para ter certeza de que tudo ficará como você espera, use um blog de testes e veja o resultado antes de aplicar em seu blog original as modificações desejadas.
• Há outros dois artigos que tratam de como fazer modificações no Link de Navegação. Dê uma olhada neles para ver qual tipo agrada mais:
• Se o seu blog não tem os links de navegação, leia: Link de Navegação das páginas do Blog.
• Para trocar o texto por imagens: Imagem no Postagem Recente ou Antiga.

O tutorial original é do Usuário Compulsivo, no artigo Como personalizar o navegador do Blogger, ao menos foi lá que vi a primeira vez. Fiz algumas adaptações e adicionei alguns elementos para ficar mais completo e vou mostrar como personalizar a posição dos links.

Personalizando o Link de Navegação

Entre no painel do Blogger e clique em “Modelo”, depois no botão “Editar HTML”, lembrando de selecionar a caixa “Expandir modelos de widgets”.

Será preciso identificar longos trechos de código e substituí-los, portanto tenha muita atenção e cuidado. Exatamente pela dificuldade que alguns podem ter para identificar os códigos e as linhas corretas é que recomendamos fazer testes e backup antes de tentar aplicar em seu blog original.

Passo 1.

A primeira parte é modificar o código CSS que configura os links. Encontre o seguinte:
#blog-pager-newer-link {
float: $startSide;
}
#blog-pager-older-link {
float: $endSide;
}
#blog-pager {
text-align: center;
}

Isso terá que ser substituído por completo pelo seguinte código:

#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 {text-align: center;}

Onde está indicado de vermelho é o que determina a posição relativa na página. No caso os links ficarão centralizados. Se você trocar “center” por “left” os colocará à esquerda e “right” para a direita. Depois de completar todo o processo, veja qual a melhor posição que seu layout se adapta.

Já as partes marcadas em verde claro, determinam as cores. São perfeitamente modificáveis segundo o estilo de seu blog.

Passo 2.

Para que as modificações se apliquem de fato, precisa fazer uma última alteração de códigos, agora na parte do HTML do código-fonte de seu template. Assim procure mais uma vez pelo seguinte (tenha muita atenção pois pode ser um pouco mais difícil achar essa parte por completo e tenha cuidado para não modificar mais que o indicado):

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

Para ajudar a encontrar essa parte, isso pode aparecer imediatamente abaixo de uma linha semelhante à esta (mas não modifique ela, é apenas uma ajuda para encontrar o que foi indicado):

Tudo isso será modificado, colocando no lugar este código:
<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; Anterior</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>
<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>

Bastará salvar o modelo e verificar o resultado em seu blog para certificar-se de que tudo ficou como desejado. Faça as alterações desejadas, passe as páginas do blog para ver se tudo funciona e teste em outros navegadores para ver se não apresenta erros de leitura nem conflito com outras partes e códigos do template em uso.

Espero que seja útil.

Veja como fazer outras modificações em Templates:

• Quantidade e tamanho das Postagens na primeira página
• Medidas de um Template do Blogger
• Configurando as partes dos Artigos do Blog
• Adicionar nova Barra Lateral ao Blog [Nova Sidebar / Coluna]
• Adicionar Colunas na Barra Lateral do Blog [Sidebar dividida]