Personalizar Links de Navegação do Blogger

barra28

O roda-pé de todo template tem links de navegação que direcionam os visitantes para as páginas anteriores ou navegar de um artigo para o outro, anterior ou posterior. A grande maioria desses modelos de layout têm links em forma de texto e são pouco atrativos, o que acaba dificultando a vida do visitante. É possível modificar esses links e personalizá-los para melhorar a navegabilidade em seu blog. Veja como fazer.

Se você rolar a página do [ Ferramentas Blog ]  verá que estamos com um novo modelo de link de navegação e é exatamente esse resultado e modificação que queremos ensinar aqui hoje. Mas vamos aos primeiros passos.

  • Antes de fazer qualquer modificação em seu Template, faça um backup de segurança: Backup no Blogger – seu Blog seguro.
  • Para ter certeza de que tudo ficará como você espera, use um blog de testes e veja o resultado antes de aplicar em seu blog original as modificações desejadas.
  • Há outros dois artigos que tratam de como fazer modificações no Link de Navegação. Dê uma olhada neles para ver qual tipo agrada mais:

O tutorial original é do Usuário Compulsivo, no artigo Como personalizar o navegador do Blogger, ao menos foi lá que vi a primeira vez. Fiz algumas adaptações e adicionei alguns elementos para ficar mais completo e vou mostrar como personalizar a posição dos links.

Personalizando o Link de Navegação

Entre no painel do Blogger e clique em “Modelo”, depois no botão “Editar HTML”, lembrando de selecionar a caixa “Expandir modelos de widgets”.

Será preciso identificar longos trechos de código e substituí-los, portanto tenha muita atenção e cuidado. Exatamente pela dificuldade que alguns podem ter para identificar os códigos e as linhas corretas é que recomendamos fazer testes e backup antes de tentar aplicar em seu blog original.

Passo 1.

A primeira parte é modificar o código CSS que configura os links. Encontre o seguinte:
#blog-pager-newer-link {
float: $startSide;
}
#blog-pager-older-link {
float: $endSide;
}
#blog-pager {
text-align: center;
}

Isso terá que ser substituído por completo pelo seguinte código:

#blog-pager a {
text-decoration: none;
padding: .2em 1em;
margin: .2em;
color: #000000; /* Cor do texto */
background-color: #FFFFFF; /* Cor de fundo */
border: 1px dotted #CCCCCC; /* Cor da borda */
}

#blog-pager a:hover {
color: #000000; /* Cor do texto */
background-color: #EEEEEE; /* Cor do destaque */
border: 1px dotted #CCCCCC; /* Cor da borda */
}

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

Onde está indicado de vermelho é o que determina a posição relativa na página. No caso os links ficarão centralizados. Se você trocar “center” por “left” os colocará à esquerda e “right” para a direita. Depois de completar todo o processo, veja qual a melhor posição que seu layout se adapta.

Já as partes marcadas em verde claro, determinam as cores. São perfeitamente modificáveis segundo o estilo de seu blog.

Passo 2.

Para que as modificações se apliquem de fato, precisa fazer uma última alteração de códigos, agora na parte do HTML do código-fonte de seu template. Assim procure mais uma vez pelo seguinte (tenha muita atenção pois pode ser um pouco mais difícil achar essa parte por completo e tenha cuidado para não modificar mais que o indicado):

<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>

Para ajudar a encontrar essa parte, isso pode aparecer imediatamente abaixo de uma linha semelhante à esta (mas não modifique ela, é apenas uma ajuda para encontrar o que foi indicado):

<b:widget id='Blog1' locked='true' title='Postagens no blog' type='Blog'>

Tudo isso será modificado, colocando no lugar este código:
<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='Página anterior'>&lt;&lt; Anterior</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>

<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='Próxima página'>Seguinte &gt;&gt;</a>
</span>
</b:if>

</div>
<div class='clear'/>
</b:includable>

Bastará salvar o modelo e verificar o resultado em seu blog para certificar-se de que tudo ficou como desejado. Faça as alterações desejadas, passe as páginas do blog para ver se tudo funciona e teste em outros navegadores para ver se não apresenta erros de leitura nem conflito com outras partes e códigos do template em uso.

Espero que seja útil.

Veja como fazer outras modificações em Templates:

.

16 Comentários

  1. Queria saber se é possível incluir links de navegação usando o modelo clássico (html) do blogspot… realmente não sei xhtml e queria MUITO colocar algum tipo de link do gênero pra que meus posts anteriores não se perdessem :/

    obrigada!

    Responder

  2. Marcos, eu apliquei esse tutorial no meu blog de testes, só que os botões só apareciam quando abria uma postagem, não na página incial. Daí eu deduzi (e corretamente) q era algo no template do de testes, e tentei no template atual do meu blog, e ficou normal. Alguma idéia de pq não apareça no de testes que to aprimorando pra usar?

    Responder

  3. @César,
    pode ser simplesmente por causa de haver poucos artigos no blog de teste e não ter páginas a serem passadas.
    Esses links só aparecem quando á páginas.

    Responder

  4. Eu pensei nisso, Marcos, e fiz várias postagens, mais agora para ter certeza. A home ta configurada para mostrar 15 postagens e eu postei 23 de teste. Se quiser dar uma olhada: http://testespegaorato.blogspot.com/ (só to mandando o link pq ele não está na minha lista de blogs, eu li a política de comentários, me perdoe por quebrar suas regras)

    Responder

  5. @César,

    nesse caso o link passa, sem problemas.
    Realmente não entendo pq no blog de testes ele não funciona, pode ser por conflito com outros códigos ou pelo formato da configuração.

    O importante é que funciona no Blog original.

    Responder

  6. @Lucas,

    isso acontece quando o espaço no footer do blog é menor que o tamanho do quadro. Nesse caso vc terá q entrar em contato com quem criou o template para saber como proceder na mudança.

    Responder

  7. Muito bom mesmo. Parabéns!

    Suas instruções tem sido de muito proveito para mim; muito obrigado e parabéns pela boa didática.

    Responder

  8. Olá marcos mo meu blog o blogger acusa o seguinte erro:
    Erro ao analisar XML, linha 932, coluna 18: Open quote is expected for attribute “{1}” associated with an element type “id”.
    Como arruma?

    Responder

  9. Marcos, tentei usar o “link de navegação numerado para blogger” e não funcionou, tentei usar esse que está acima e não existe o primeiro trecho do css que você fala.
    O primeiro fiz exatamente como você falou, não colei em local diferente, será que o problema está nesse novo blogger?

    Um abraço

    Responder

Deixe um comentário

Ao comentar você concorda com nossa Política de Comentários.