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: