Customizar os Links de Navegação do Blogger

Customizar os Links de Navegação do Blogger deixa o blog com uma cara mais profissional..
Para quem não sabe, Links de navegação são os link “postagens antigas”, “postagens recentes” e “inicio”, que, por padrão no blogger, aparecem na parte final da área de postagens do blog.

Estes links servem para facilitar a navegação do leitor no encontro dos artigos anteriores ou os recentemente publicados no seu blog.

Eu já mostrei, em outro artigo, que é possível alterar o texto padrão dos links de navegação, ou substituir o texto por uma imagem. Ocorre que alguns leitores me pediram para mostrar outras formas de personalização destes links, como por exemplo, modificar o CSS , incluindo bordas em volta dos links, incluir uma cor de fundo e fazer com que ela mude quando passamos o mouse em cima.

Veremos neste artigo apenas como aplicar estilos CSS a estes links.

[becape]Antes de mais nada, você já deve saber que é sempre bom fazer um backup do seu Template para evitar transtornos.[/becape]

Customizar os Links de Navegação do Blogger

Como existem muitas variações de estilos a serem aplicados, vou destacar cada elemento informando o que cada um representa.
Os estilos deverão ser aplicados por você, de acordo com sua preferência.

Aplicar estilos aos links de postagens recentes, postagens antigas e inicio

Entre no painel do blogger e acesse o menu “modelo” >>”editar html“, não precisa clicar em “expandir modelos de widgets” e procure por:

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

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

E substitua por:

/* Links de Navegação
------------------------ */
#blog-pager {
clear:both;
text-align: center;
margin:0px auto;
padding:20px;
}
#blog-pager a:link, #blog-pager a:visited{ /* links ativos e visitados */
color:#XXXXXX; /*---- cor do link ---- */
font-size:XXpx; /*--tamanho da fonte--*/
padding:10px; /*--- espaçamento ---*/
border:1px solid #XXXXXX; /*--- cor e tipo de borda --- */
background-color:#XXXXXX; /*--- cor de fundo --- */
-moz-border-radius:10px; /*--- bordas arredondadas --- */
-khtml-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}
#blog-pager a:hover{/* links no efeito hover */
color:#XXXXXX; /*---- cor do link no efeito hover---- */
padding:10px; /*--- espaçamento ---*/
border:1px solid #XXXXXX; /*---- cor e tipo de borda no efeito hover---- */
background-color:#XXXXXX; /*--- cor de fundo no efeito hover--- */
}
#blog-pager-newer-link {
float: left;
}
#blog-pager-older-link {
float: right;
}

Se você estiver utilizando os templates Designer de Modelo, o trecho CSS referente aos links de navegação se apresentam de maneira diferente, dependendo do modelo.
Portanto, você deverá tentar localizar o trecho referente aos links de navegação.
Para tentar facilitar, deixarei 2 tipos de códigos diferentes, mas lembre-se, se no seu template não tiver nenhum destes dois, tente localizar o código parecido, ok?

.blog-pager {
}
.blog-pager-older-link, .home-link,
.blog-pager-newer-link {
}

ou

#blog-pager {
}

Localizado o trecho de código referente aos links de navegação, substitua TODO ele por este outro:

/* Links de Navegação
------------------------ */
#blog-pager {
clear:both;
text-align: center;
margin:0px auto;
padding:20px;
}
#blog-pager a:link, #blog-pager a:visited{ /* links ativos e visitados */
color:#XXXXXX; /*---- cor do link ---- */
font-size:XXpx; /*--tamanho da fonte--*/
padding:10px; /*--- espaçamento ---*/
border:1px solid #XXXXXX; /*--- cor e tipo de borda --- */
background-color:#XXXXXX; /*--- cor de fundo --- */
-moz-border-radius:10px; /*--- bordas arredondadas --- */
-khtml-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}
#blog-pager a:hover{/* links no efeito hover */
color:#XXXXXX; /*---- cor do link no efeito hover---- */
padding:10px; /*--- espaçamento ---*/
border:1px solid #XXXXXX; /*---- cor e tipo de borda no efeito hover---- */
background-color:#XXXXXX; /*--- cor de fundo no efeito hover--- */
}
#blog-pager-newer-link {
float: left;
}
#blog-pager-older-link {
float: right;
}

Visualize, e se estiver tudo de acordo com seu gosto, salve!

Vejam um pequeno exemplo do que vocês podem fazer:

Lembrando que, para todos os casos acima, os estilos deverão ser aplicados por você de acordo com seu gosto.