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.

]]></b:skin>
<script src=’http://louislim2.googlepages.com/addSmiley.js ‘ type=’text/javascript’/>
</head>

#outer-wrapper {
width: 750px;
…
}
#main-wrapper {
width: 400px;
margin-left: 20px;
…
}
#sidebar-wrapper {
width: 150px;
float: right;
…
}
#newsidebar-wrapper {
width: 150px;
float: left;
…
}

<div id=’newsidebar-wrapper’>
<b:section class=’sidebar’ id=’newsidebar’ preferred=’yes’>
<b:widget id=’NewProfile’ locked=’false’ title=’About Me’ type=’Profile’/>
</b:section>
</div>

<div id=’main-wrapper’>
<b:section class=’main’ id=’main’ showaddelement=’no’>
<b:widget id=’Blog1′ locked=’false’ title=’Blog Posts’ type=’Blog’/>
</b:section>
</div>

<div id=’sidebar-wrapper’>
<b:section class=’sidebar’ id=’sidebar’ preferred=’yes’>
<b:widget id=’BlogArchive1′ locked=’false’ title=’Blog Archive’ type=’BlogArchive’/>
</b:section>