Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Criação de Blogs Profissionais e Redes Sociais.

Tutoriais Blogger Vanessa S.

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:
Customizar os Links de Navegação do Blogger

Lembrando que, para todos os casos acima, os estilos deverão ser aplicados por você de acordo com seu gosto.
Você também pode aplicar o efeito de Bordas Arredondadas e efeito sombreado nas bordas.
(Veja mais sobre tipos de bordas em:Personalizar Bordas)

Você também pode aplicar efeito sombra na fonte dos links.

Usem a imaginação, e boa sorte!

Sobre o autor | Website

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Desculpe, os comentários deste artigo estão encerrados.

15 Comentários

  1. Adorei a dica!!

    Estou começando a personalizar o meu e você ajudou muito!!
    Obrigada mesmo!!
    Sucesso!
    Beijos

  2. muito obrigado estava atras dessa informação!!!

  3. coelho disse:

    Olá, queria encarecidamente um link ou post sobre como por paginação numerada no blog, pois tentei de tudo e não consegui. meu template é o Viajem do blogger. Obrigado

  4. Elite disse:

    Clau como faço pra deixa igual do template aqui do mundo blogger?
    Assim só os nomes: Inicio » Layout » Personalizar » Customizar os Links de Navegação do Blogger
    Obrigado , otimo post!

  5. .:: Clau ::. disse:

    Gislaine A.
    Lamento mas não tenho como te ajudar. Justamente para evitar esse tipo de problema que eu sempre recomendo que se faça um backup do template antes de realizar qualquer modificação.

  6. Gislaine A. disse:

    Ei, Clau, fiz alguma coisa errada e não deu certo. Tentei colocar imagens, não gostei e tentei fazer voltar ao normal mas não consegui e agora não aparece nada. Pode me ajudar?? aki o link para vc ver: spaceteen-oficial.blogspot.com

  7. Bristol disse:

    Claaaau, [she back *-*]
    Gostei muito desse post, mas particularmente eu fiz o seu outro, substitui por imagens eu acho mais estiloso.

  8. Lucas Rafael disse:

    êbaaaaaa, a Clau voltou, não aguentava tanta saudade, rsrs!

    Clau, será que dá pra vc fazer um post ensinando a hospedar arquivos "javascript" em um site que vc recomenda, pq sempre quando vc posta dicas, para hospedar arquivos "java" não consigo!

    Espero que me ajude, estou aqui sempre!

  9. Luis Henriques disse:

    Quem bom que você voltou Clau, para mim o seu blog é o melhor da categoria! rsrsrs e não é exagero não!

    Estou aguardando ansiosamente sobre as postagens que te sugeri até lá. Abraços!!!

  10. Renan Almeida disse:

    Muito Boa Dica .

    Clau eu tambem deixe algumas postagens progamadas mas elas não foram postada . Eu acho que você cometeu o mesmo erro que o meu . Poderia me explicar .

    http://www.pes-center.com/

  11. ??????? disse:

    Muito obrigado pela paciencia!
    Eu revirei esse post pra procurar isso e nao tinha achado rsrsrss Obrigado.

  12. .:: Clau ::. disse:

    Pois é meninos, eu voltei hje..esse post era pra ter sido publicado dia 11/01 pq eu tinha deixado programado, mas fiz uma "caquinha básica" e o post não saiu, deu erro..haha..
    Não deu nem tempo de avisar meu retorno hje, deixei pra amanhã..rs
    Obrigada pelos comentários 😉

    ???????,
    Para substituir o link por imagem já tem artigo publicado, o link está no inicio do post. Sobre colocar imagem no efeito hover, amanhã acrescento esta informação no post relacionado.

  13. Leo Souza disse:

    Fiquei tão feliz ao ver um novo post seu depois de tanto tempo. Ah, boa dica no post!

  14. ??????? disse:

    "Fazendo um Ctrl+C Ctrl+V do Facebook"

    AAAAAAAAAAh
    A Clau voltou!
    Post perfeito como esperado . . . so faltou falar como substituir o link por imagem.
    E se ha possibilidade de fazer um efeito hover com elas -rsrs

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.