Alterar os links Postagens mais antigas e recentes

|
Hello! Primeiramente, quero agradecer todos os vários parabéns que eu recebi aqui no blog, muito obrigada mesmo, vocês são incríveis! Infelizmente não deu pra responder todo mundo, mas saibam que estou muito agradecida mesmo!
Agora vamos ao assunto do post de hoje, que foi pedido de uma visitante, que queria saber como por imagem no lugar dos links "Postagens mais antigas" e "Postagens mais recentes", que nem eu fiz aqui no blog:
image
Fazer isso é bem simples e rápido, primeiramente, você precisa fazer as imagens que vão aparecer lá. Você pode escrever inicio, anterior e próxima como eu fiz, ou escrever o que quiser. Só não faça uma imagem muito grande pois vai distorcer seu layout.
Depois que fizer as imagens, hospede-as em algum servidor (eu recomendo o tinypic).
Agora vá para seu blog, clique em Design > Editar HTML
Marque a caixinha "Expandir Modelos de Widgets"
Aperte Ctrl + F e procure por: <b:includable id='nextprev'>
Vai aparecer o código abaixo:
<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>
Apague essa parte e cole no lugar o código abaixo:
<b:includable id='nextprev'>
<div id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<a expr:href='data:newerPageUrl' expr:title='data:newerPageTitle' id='blog-pager-newer-link'>
<img src='ENDERECO-DA-IMAGEM-ANTERIOR'/></a>
</b:if>
<b:if cond='data:olderPageUrl'>
<a expr:href='data:olderPageUrl' expr:title='data:olderPageTitle' id='blog-pager-older-link'>
<img src='ENDERECO-DA-IMAGEM-PRÓXIMA'/></a>
</b:if>
<a title='página inicial' class='home-link' expr:href='data:blog.homepageUrl'>
<img src='ENDERECO-DA-IMAGEM-INÍCIO'/></a>
</div>
<div class='clear'/>
</b:includable>
E substitua as partes em rosa pelo link da imagem correspondente.
Visualize se ficou tudo certo e salve!
divisória
Espero que tenham gostado! O próximo tutorial vai ser de como substituir esses links por números, ou seja, como por páginas numeradas. Até lá!
Kissus
sing-liah

16 comentários

  1. Nha, que bom que gostou das fontes *-* Poisé, estamos ficando velhas, o tempo pasa rapido, OAKODKSOAKO' Bjus :3

    ResponderExcluir
  2. Vou tentar fazer depois, fica muito lindo.
    Visita e comenta?
    girlteen-s2.blogspot.com
    encomendaspsf.blogspot.com
    simplismentetudoo.blogspot.com

    ResponderExcluir
  3. Ain adoreeei! *-*
    E... FELIZ ANIVERSÁRIO meio atrazadoo, muito sucesso, felicidade e amor.

    Um beijo, L.

    miss-scd.blogspot.com

    ResponderExcluir
  4. Ahhh que dica legal !
    mas porenquanto eu não preciso ..
    hauhsahs
    Valeu pela visitaa . AMEI .

    ResponderExcluir
  5. Dica ótima,mas estou usando 'numeradas' para quem gosta com imagens,etc é uma dica boa :D
    http://justdreams-ana.blogspot.com/

    ResponderExcluir
  6. O Rg reabriu! Confira e surpreenda-se! (:
    http://blog-realgirls.blogspot.com

    ResponderExcluir
  7. adoro muito as dicas, principalmente essa! ^^

    quanto aos menus é possivel fazer com tag né? se sim gostaria de saber como obrigada :**

    ResponderExcluir
  8. Flor , mto obg , me ajudou mt!!!

    ResponderExcluir
  9. como faço para colocar a imagem q separa um post do outro? n estou conseguindo pode me ajudar? n achei nenhum post pra isso tbm :$

    ResponderExcluir
  10. Amei , to usando no meu blog ;) valew pela dica

    ResponderExcluir
  11. obrigada Liah, muito útil este tutorial

    ResponderExcluir
  12. Funcionou direitinho muito obg

    http://cponlineclubpenguin.blogspot.com.br/

    ResponderExcluir