• Acessórios

  • Layouts para blog

  • kits de imagens

  • Goodies

  • Layouts free

  • NOME DA FOTO OU TEXTO

7 de janeiro de 2012

Customizar os Links de Navegação do Blogger




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.


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


Antes de mais nada, você já deve saber que é sempre bom fazer um backup do seu Template para evitar transtornos.
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 na aba "design" >>"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 {
<--restante do código--->
}
.blog-pager-older-link, .home-link,
.blog-pager-newer-link {
<--restante do código--->
}

ou

#blog-pager {
<--restante do código--->
}


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.


credito: mundo blogger

0 comentários:

Deixe seu comentário:

Related Posts Plugin for WordPress, Blogger...