Personalizando os links de navegação do Blogger

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.