Iconos de navegación

Recuerda...
Antes de probar cualquier código.
Guarda siempre tu plantilla,
aunque yo los pruebo antes. Algo podría fallar...

Si quieres cambiar "entradas antiguas", "página principal" y "entradas recientes", por unos iconos para facilitar la navegación en tu blog como estos:

---------

Tienes que buscar en tu plantilla
(HTML-expandir artilugios) esta parte del código:

<b:includable id='nextprev'>

Una vez localizado sustituyes todo lo que está desde
<b:includable id='nextprev'> a </b:includable>(ambos incluidos) por esta parte de código:

<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/left.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/right.gif'/></a>
</b:if>
<a class='home-link' expr:href='data:blog.homepageUrl'>
<img src='http://photos1.blogger.com/blogger2/3880/707811929476148/1600/home.gif'/></a>
</div>
<div class='clear'/>
</b:includable>

* Si además quieres poner los iconos en la parte de arriba de la página, mientras aún estas en la plantilla (con los elementos expandidos), buscas esta parte del código y añades la parte del código que está subrayado:

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

Resultado:


* Como verás los iconos que aparecerán en tu blog usando el código tal cual, son de color gris, en Hoctro los tienes también en azul, azul clarito y naranja.
Si prefieres usar tus propios iconos, tienes que cambiar la url de las imágenes por las de tus iconos.
¡A navegar!

Visto en : Hoctroc´s Place

Actualización:
He visto en algunos blogs con este truco aplicado, que los iconos se ven los tres juntos, eso es debido a que, por el motivo que sea, falta el código del CSS que hace que se vean correctamente. Así que hemos de incluirlo en la plantilla justo antes de ]]></b:skin>:

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

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