Esse código é para quem quer mudar os “posts antigos”, “página principal” e “posts recentes”, por ícones de navegação. A fonte desse post está no blog do Hoctro (eu apenas traduzi para o português). Faça o download do código e explicações.
Vá ao painel de controle, e, em Edit Html, clique em ‘expandir widgets’, então procure e ache essa parte do código:

<b:includable id=’nextprev’>

E troque tudo desde <b:includable id=’nextprev’> a </b:includable> (ambos incluidos) pelo 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=’http://photos1.blogger.com/blogger2/3880/707811929476148/1600/lef t.gif’/></a>
</b:if><b:if cond=’data:olderPageUrl’>
<a expr:href=’data:olderPageUrl’ expr:title=’data:olderPageTitle’ id=’blog-pager-older-link’>
<img src=’http://photos1.blogger.com/blogger2/3880/707811929476148/1600/rig ht.gif’/></a>
</b:if>
<a class=’home-link’ expr:href=’data:blog.homepageUrl’>
<img src=’http://photos1.blogger.com/blogger2/3880/707811929476148/1600/hom e.gif’/></a>
</div>
<div class=’clear’/>
</b:includable>

* Se quiser colocar os icones na parte de cima da página, procure no template (com expandir widgets clicado), essa parte de código e adicone abaixo da parte do código em negrito, essa nova linha em uva.

<b:includable id=’main’ var=’top’>
<div id=’blog-posts’>
<b:include name=’nextprev’/>

Resultado e visualização: Blog do Hoctro

* Os ícones que aparecerão no seu blog usando esse código, estão em cinza, no blog do Hoctro tem em azul, azul claro e laranja. Se quiser usar outros que não sejam esses, procure na web por eles, e troque a url/endereço das imagens de acordo com a imagem que você usar.

Importante, alguns templates de blogs onde o truque é adicionado, os icones são vistos os 3 juntos, isso se deve ao motivo que de falta o código do CSS que faz com sejam vistos corretamente, quais sejam:

#blog-pager-older-link {
float: right;
}

#blog-pager-newer-link {
float: left;
}
#blog-pager {
text-align: center;
}

Então, se seu tema não tem o CSS assim, troque por esse e arrume os icones.

This entry was posted Filed under Códigos Para O Novo Blogger.