Twitter Delicious Facebook Digg Stumbleupon Favorites More

Trocar links postagem mais antiga/Recente

Essa semana recebi um e-mail de um de nossos leitores, o Rafael A. M., perguntando com alterar imagem dos links postagens mais recentes, início e postagens mais antigas do rodapé da coluna do post.

Para quem já está acostumado com os mecanismos do Blogger, essa alteração não representa qualquer dificuldade, entretanto para aqueles que estão começando agora ou que utilizam o Blogger há algum tempo mas não são muito íntimos de HTML E XML, a coisa não parece ser das mais simples.

Modificar o texto ou usar imagens no lugar dos links postagens mais antigas, postagens mais recentes e inicio não é difícil, mas encontrá-lo no código HTML, só contrantando Sherlock Holmes. Quem já tentou procurar utilizando as frases ‘postagens mais antigas’ ou ‘postagens mais recentes’ concerteza não encontrou. O motivo: o Blogger utiliza tags XML para esses mecanismos.

Mas chega de história e mais explicações, vamos passar para o lado prático da coisa.

Para identificar esses links no código HTML do seu blog, prossiga da seguinte forma:

1 – Vá em Editar HTML e clique em expandir o modelo de widget, logo em seguida procure por:

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

Logo abaixo deve conter, com poucas lterações dependendo do layout do seu blog, o seguinte código:

  • Nesse código, as tags marcadas em vermelho, represetam, respectivamente, Postagens mais recentes, Postagens mais antigas e Início (link que leva à homepage).
  1. <data:olderPageTitle/> link para postagens mais antigas;
  2. <data:newerPageTitle/> link para postagens mais recentes;
  3. <data:homeMsg/> link para pagina inicial do blog, (esse aparece no código duas vezes, então modifique as duas da mesma maneira).

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

Você tem algumas opções a serem trabalhadas nesses links. Você pode:

 

  • removê-los;
  • substituí-los por imagens(previamente hospedadas em provedores como o tynipic ou photobucket);
  • Substituir os nomes dos links (ex.: Página anterior e Próxima página) ou;
  • decorar os links utilizando CSS.

Para os efeitos didáticos deste post, veremos como substituílos por outros textos e por imagens:

Substituindo por outros textos:

Para substituir por outros textos, troque apenas da meneira como está sendo indicado abaixo:

<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'> TEXTO A SER EXIBIDO </a>

Substituindo os textos por imagens:

Para substituir por outros textos, troque apenas da meneira como está sendo indicado abaixo:

<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'> <img border="0" src="endereço da imagem"/> </a>

Observe que aqui nós substituimos os respectivos links por códigos de imagens. Estas imagens relacionadas à próxima página ou posts mais antigos e, página anterior ou postas mais recentes, você poderá encontrar na internet ou criá-la no seu PC utilizando programas como Flash, Fireworks ou CorelDraw e hospedá-las em servidores de imagnes como o tynipic, o photobucket ou imagehack.

Após fazer as alterações clique para visualizar e, se não der qualquer erro, clique em salvar e confira se esá tudo ok acessando um post seu.

Por hoje é só, tenho que estudar para prova. Dúvidas? Pergunte nos comentários.

4 comentários:

Anônimo disse...

muito boa essa dica
tava procurando isso a um tempaum

Anônimo disse...

Dica bastante elucidativa...
Parabéns, continue assim.

Danyllo de Tassyo disse...

Vlaeu !!!!!!!!!

Danyllo de Tassyo disse...

Valeu!!!!

Postar um comentário

Envie um comentário!

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | Blogger Templates