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:

Berry ♔ disse...

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

Mariana disse...

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

Miss Suicida disse...

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

Um beijo, L.

miss-scd.blogspot.com

Luana Pessoaa disse...

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

Ana Luiza disse...

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

Liliane Duarte. disse...

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

BelMendes disse...

adoro muito as dicas, principalmente essa! ^^

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

Gabriela Cruz disse...

caraca, onde aprendeu a fazer isso tudo?

lauramolan disse...

Flor , mto obg , me ajudou mt!!!

lauramolan disse...

Deu super certo !

Isa disse...

NÃO ACHEI

Pâmela disse...

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

* disse...

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

Denise & Estefani disse...

Adorei brigada ♥

Unknown disse...

obrigada Liah, muito útil este tutorial

Unknown disse...

Funcionou direitinho muito obg

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

Postar um comentário