Agregar iconos de navegación al blog -39-

Iconos de navegación.- Son imágenes enlace que incluimos en las páginas y que suelen tener la apariencia de botones o flechas, cuya función es ayudar al visitante a navegar por nuestra página.
Ejemplo:


1. Para agregar los iconos de navegación tendrás que ir a Plantilla (Template), luego a Edición de HTML y clic en Expandir plantillas de artilugios. Luego buscas el includable con el id nextprev.

<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 ubicado <b:includable id='nextprev'>, tienes que reemplazar todo el código anterior por lo siguiente:

<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. Por otro lado, si tu quieres cambiarlo por algún texto, tienes que reemplazar:
- <img src='http://...left.gif'/> (Entradas antiguas) por tu texto.
- <img src='http://...right.gif'/> (Entradas más recientes) por tu texto.
- <img src='http://...home.gif'/> (Página principal) por el texto que deseas.

Nota: Te voy a proporcionar algunos iconos que he subido a Photobucket para que los pegues en tu blog, pero si no te gustan, entonces tendrás que utilizar un buscador y escribir iconos de navegación

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

Via: Hoctro's Place