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:
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 + "_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>
Apague essa parte e cole no lugar o código abaixo:<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>
<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.<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>
Visualize se ficou tudo certo e salve!
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
Nha, que bom que gostou das fontes *-* Poisé, estamos ficando velhas, o tempo pasa rapido, OAKODKSOAKO' Bjus :3
ResponderExcluirVou tentar fazer depois, fica muito lindo.
ResponderExcluirVisita e comenta?
girlteen-s2.blogspot.com
encomendaspsf.blogspot.com
simplismentetudoo.blogspot.com
Ain adoreeei! *-*
ResponderExcluirE... FELIZ ANIVERSÁRIO meio atrazadoo, muito sucesso, felicidade e amor.
Um beijo, L.
miss-scd.blogspot.com
Ahhh que dica legal !
ResponderExcluirmas porenquanto eu não preciso ..
hauhsahs
Valeu pela visitaa . AMEI .
Dica ótima,mas estou usando 'numeradas' para quem gosta com imagens,etc é uma dica boa :D
ResponderExcluirhttp://justdreams-ana.blogspot.com/
O Rg reabriu! Confira e surpreenda-se! (:
ResponderExcluirhttp://blog-realgirls.blogspot.com
adoro muito as dicas, principalmente essa! ^^
ResponderExcluirquanto aos menus é possivel fazer com tag né? se sim gostaria de saber como obrigada :**
caraca, onde aprendeu a fazer isso tudo?
ResponderExcluirFlor , mto obg , me ajudou mt!!!
ResponderExcluirDeu super certo !
ResponderExcluirNÃO ACHEI
ResponderExcluircomo 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 :$
ResponderExcluirAmei , to usando no meu blog ;) valew pela dica
ResponderExcluirAdorei brigada ♥
ResponderExcluirobrigada Liah, muito útil este tutorial
ResponderExcluirFuncionou direitinho muito obg
ResponderExcluirhttp://cponlineclubpenguin.blogspot.com.br/