Agregar iconos de navegación en Blogger

Me pregunta Flapy sobre cómo conseguir los iconos que tengo justo debajo de todos los posts para ir a páginas posteriores y anteriores. Estos iconos son los llamados iconos de navegación, suelen tener la apariencia de botones o flechas y su función es ayudar al visitante a navegar por nuestro blog.

Una vez explicado esto, voy a pasar a detallar los pasos que teneis que seguir para añadir estos iconos de navegación a vuestro blog:

1. Accedemos a Plantilla / Edición de HTML / Expandir plantilla de artilugios. Una vez allí buscamos el siguiente código:

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


2. Una vez localizado ese código, lo tendreis que reemplazar por este otro:

<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://i151.photobucket.com/albums/s137/andrewmusic1/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://i151.photobucket.com/albums/s137/andrewmusic1/right.gif'/></a>
</b:if>
<a class='home-link' expr:href='data:blog.homepageUrl'>
<img src='http://i151.photobucket.com/albums/s137/andrewmusic1/home.gif'/></a>
</div>
<div class='clear'/>
</b:includable>

3. Guardamos los cambios y listo.

Si copiais el código tal y como yo os lo he dado, tendreis unos iconos de navegación como los míos. Por si acaso, aquí os dejo otros modelos que puedan ir mejor con vuestro blog. Sólo teneis que cambiar la URL de mis iconos por la de los que querais usar (después de img src=).

<img src="http://i151.photobucket.com/albums/s137/andrewmusic1/right-1.gif" />


<img src="http://i151.photobucket.com/albums/s137/andrewmusic1/home-1.gif" />


<img src="http://i151.photobucket.com/albums/s137/andrewmusic1/left-1.gif" />


<img src="http://i151.photobucket.com/albums/s137/andrewmusic1/right-2.gif" />


<img src="http://i151.photobucket.com/albums/s137/andrewmusic1/home-2.gif" />


<img src="http://i151.photobucket.com/albums/s137/andrewmusic1/left-2.gif" />


<img src="http://i151.photobucket.com/albums/s137/andrewmusic1/right-3.gif" />


<img src="http://i151.photobucket.com/albums/s137/andrewmusic1/home-3.gif" />


<img src="http://i151.photobucket.com/albums/s137/andrewmusic1/left-3.gif" />


NOTA: Podeis poner otras imágenes diferentes, pero siempre teniendo en cuenta que deben ir en el siguiente orden: Izquierda / Derecha / Inicio (central).