quinta-feira, 25 de novembro de 2010

Personalizando os links de navegação do Blogger

image
Os links de navegação, são aqueles 3 links que aparecem no final de cada página dos blogs do Blogger. Eles servem para auxiliar o visitante a “navegar” pelo arquivo do blog, avançando e retrocedendo as postagens do arquivo.

blog-pager-blogger
Considero obrigatório, o uso dos links de navegação, já que sem eles ficaria muito complicado ter acesso a todos os posts que não se encontram na página inicial.
Muito bem. Com um pouco de CSS e com algumas mudanças no código original do Blogger, podemos fazer maravilhas com os links de navegação.

Primeiramente, irei ensinar como mudar o código original. Antes de começar, faça um backup completo do template ou use um blog de testes.

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;
}
image
Os ítens em vermelho, podem ser modificados livremente. Veja a tabela de cores.
Para colocar numeração nos links, vá até o Mundo Blogger: Numerar Páginas no Blog

Sobre o autor: Juliana é a fundadora deste blog. Nascida em 1970, é médica e, nas horas vagas, blogueira. Também é top colaboradora do fórum de ajuda do Blogger. Twitter l Google Plus l Facebook l

10 comentários:

  1. Nossa, se isso tivesse sido postado um mês atrás, teria me poupado um bocado de tempo sofrendo e tentando descobrir como fazer essa alteração XP

    ResponderExcluir
  2. Já vi esse estilo em diversos de seus templates...
    Obrigado por transmitir essa dica entre nós.
    Só uma dúvida:
    Se no lugar de:
    " « página anterior "
    eu colocar uma imagem com o código, e fazer isso nos demais links também dá certo?
    Desde já agradeço...

    ResponderExcluir
  3. Nossa, veio na hora certa. Irei inserir no blog.
    Juliana, você sempre nos ajudando. ;)

    ResponderExcluir
  4. Oi Juliana Sardinha e equipe dicas blogger nao estou aqui para comentar esse poste enbora sejá muito bom mas estou aqui para pedir uma coisa eu sei q vc é muito ocupada mais eu gostaria q vc analizase meu modelo é falase oq eu deveria mudar ou colocar isso seria otimo para min e eu aconpanho o blogcast adoro ó trabalho seu é do marcos lemos eu ate comentei um post dele elogiando vc é o seu trabalho bom espero q vc me ajude o meu blog chama vipers da rede tá obg
    sou seu fãn.

    ResponderExcluir
  5. Ótima dica...descobri esse blog e sigo ele...em breve implementarei essa função no meu tb, obrigado

    ResponderExcluir
  6. No meu layout os links de navegação só aparecem quando é acessado pelo IE, se meu blog for acessado pelo firefox, crome, etc. os links de navegação não aparece. Como resolver isso?

    ResponderExcluir
  7. Oi Juliana,
    Já inseri no meu blog, adorei. Mais uma vez, obrigada pelas dicas.

    ResponderExcluir
  8. ola quero parabenizar pelo post, fui muito util pra mim . valeu !!!!!!!!!!!!!!

    ResponderExcluir