-->

miércoles, 9 de mayo de 2007

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=).


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

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

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

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

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

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

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

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

Photobucket - Video and Image Hosting
<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).

10 comentarios:

Flapy dijo...

Muchas gracias !!
Voy a intentar adaptar el codigo ahora mismo (yo aun trabajo en el modelo antigo de blogger - sin artilugios- debido a que me daba problemas para colocar la publicidad del blog) y ya actualizare la plantilla manana y te cuento que tal...

Te lo agradezco mucho !!

Flapy dijo...

Muchas gracias de nuevo !!
He estado adaptando el codigo a la antigua plantilla de blogger y por ahora tengo esto:
< includable id='nextprev'>
< div id='blog-pager'>
< if cond="<$newerPageUrl$>">
< a href="<$newerPageUrl$>" title='newerPageTitle' id='blog-pager-newer-link'>
< img src='http://i151.photobucket.com/albums/s137/andrewmusic1/left.gif'/>
< /a>
< /if>

< if cond="<$olderPageUrl$>">
< a href="<$olderPageUrl$>" title='olderPageTitle' id='blog-pager-older-link'>
< img src='http://i151.photobucket.com/albums/s137/andrewmusic1/right.gif'/>
< /a>
< /if>
< a class='home-link' href="<$BlogURL$>">
< img src='http://i151.photobucket.com/albums/s137/andrewmusic1/home.gif'/>
< /a>
< /div>
< /includable>

Pero no se como se referencia a
< $olderPageUrl$>
< $newerPageUrl$>
en la antigua version de blogger.

Y claro, no funciona. Yo me voy a acostar. Aqui en japon son las 2.15 am, manan lo sigo intentando. A ver si entre los dos lo sacamos.

Una vez mas muchas gracias por todo.

PD : Pongo un espacio despues del "<" para que el comentario no lo tome como codigo html, pero yo en r ealidad no pongo ese espacio.

melanista dijo...

Claro, es que todos los hacks y trucos que encontrarás aquí están probados en la versión nueva de Blogger. Del viejo la verdad es que no tengo mucha idea..de todas formas cuando tenga un rato miraré tu código a ver qué se puede hacer.
Aunque sin duda te recomiendo que te cambies a la nueva versión de Blogger. Si es porque tuviste problemas con los anuncios, esta nueva versión incorpora una herramienta concreta para agregar publicidad de google adsense. En cuanto a plantillas o templates, si te apetece cambiarte al nuevo Blogger pero no te gustan las plantillas que te ofrece, te recomiendo por ejemplo:

http://blogyweb.blogspot.com (de aquí saqué yo la mía)
http://www.geckoandfly.com/blogspot-templates/

Flapy dijo...

Gracias !!
De todas formas, no te preocupes, ya me lo miraré después de las vacaciones (me voy el sabado hasta el domingo de la otra semana).
Una abrazo y gracias por todo !!

melanista dijo...

No hay de que! :)
A pasarlo bien en tus vacaciones.

Andrew dijo...

Hi.
Te quedo muy bien la explicación, eso creo jajaja. No esta nada mal.
Bien.
Bye.

Liz Hopps dijo...

Hola sbes me interesa mucho tu explicacion porque un amigo desea hacerlo...yo también pero a pesar de haberme cambiado a blogger beta me quede con mi platilla antigua porque me costó un mundo diseñarla...¿podrias ayudarme a adaptarla?
äsa por mi blog para que entiendas porque no me cambio
http://harshies.blogspot.com
besoso eres de gran ayuda

Liz Hopps dijo...

Me ayudarea con mi duda?..por favor...

Unknown dijo...

muchisimas gracias salio todo ok

PRACTICA FORENSE USUAL dijo...

Gracias por la información. Me ha sido de gran utilidad

 
Copyright © 2007 | Diseñado por BlogyWeb