Personalizando o Link de Navegação do seu Blog : Dicas & Tutoriais

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

<b:widget id='Blog1' locked='true' title='Postagens no blog' type='Blog'>

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.