Poner botón de Ir Arriba e Ir Abajo

Los botones de Subir y Bajar facilitan el acceso al contenido de la página, sobre todo cuando en la página principal hay muchas entradas o cuando una entrada tiene demasiados comentarios.
Vamos a ver dos formas de poner los botones de Ir Arriba e Ir Abajo, una es la forma "simple" y la otra tendrá un efecto deslizante.

Forma simple

Entra en Diseño > Edición de HTML y antes de </body> pega lo siguiente:


<a href='#'><img border='0' style='position:fixed; top:0; right:0;' src="URL de la imagen" title="Ir arriba" /></a>


<a href='#footer-wrapper'><img border='0' style='position:fixed; bottom:0; right:0;' src="URL de la imagen" title="Ir abajo" /></a>


Cambia la URL de la imagen donde se indica; el primer código corresponde al botón de Ir Arriba, el segundo al de Ir Abajo.

Efecto deslizante

Para que al subir y bajar tenga un efecto deslizante necesitaremos Scriptaculous, así que estando igual en la Edición de HTML pega antes de </head> el siguiente código:
 
NOTA: Si ya lo tienes en tu plantilla no es necesario pegarlo de nuevo.


<!-- Prototype y Scriptaculous-->
<script src='http://www.google.com/jsapi'/>
<script>
google.load(&quot;prototype&quot;,&quot;1.6.0.3&quot;);
google.load(&quot;scriptaculous&quot;, &quot;1.8.2&quot;);
</script>
<!-- Prototype y Scriptaculous-->

Ahora antes de </body> pega lo siguiente:


<a href='#outer-wrapper' onclick='new Effect.ScrollTo(&quot;outer-wrapper&quot;,{offset:-140}); return false'><img border='0' src='URL de la imagen' style='position:fixed; top:0; right:0;' title='Ir arriba'/></a>


<a href='#footer-wrapper' onclick='new Effect.ScrollTo(&quot;footer-wrapper&quot;,{offset:-140}); return false'><img border='0' src='URL de la imagen' style='position:fixed; bottom:0; right:0;' title='Ir abajo'/></a>


De igual modo hay que cambiar la URL de la imagen tomando en cuenta que el primer código es para el botón de Ir Arriba y el segundo para el de Ir Abajo.

ACTUALIZACIÓN:
En cualquiera de los dos métodos (simple o deslizante) si usas una plantilla nueva del Diseñador de plantillas de Blogger entonces tendrás que buscar esta línea:

<div class='body-fauxcolumns'>

Y cambiarla por esta otra:

<div id='outer-wrapper' class='body-fauxcolumns'>

Luego buscar esta línea:

<div class='content-cap-bottom cap-bottom'>

Y cambiarla por esta:

<div id='footer-wrapper' class='content-cap-bottom cap-bottom'>

Con eso funcionará también en esas plantillas.

Aquí les dejo unos íconos que pueden utilizar para sus botones.

Posted in: Efectos,zona de blogger