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. 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 “Layout” ~> “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 + "_blog-pager-newer-link"’ 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 + "_blog-pager-older-link"’ 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 + "_blog-pager-newer-link"’ title=’Página anterior’><< 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 + "_blog-pager-older-link"’ title=’Próxima página’>Seguinte >></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:
realmente fica bem melhor
ótima Dica.! Obrigado!…
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!
Adriana,
Nos modelos clássicos do Blogger não é possível fazer esse tipo de adaptação. Infelizmente.
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?
@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.
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)
@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.
Vlw Marcos! Eu sou insistente, consegui aqui xD
Oi, Quando eu personalizo esses links, a parte do baixo do "quadradinho" que fica em volta do texto nao aparece…
Só aparece as linhas laterias e a que fica em cima da palavra ( http://img88.imageshack.us/img88/4209/semttulo1b.jpg )
Obrigado !!
@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.
Muito bom mesmo. Parabéns!
Suas instruções tem sido de muito proveito para mim; muito obrigado e parabéns pela boa didática.