"Subir" y "Bajar" con efecto deslizante en las nuevas plantillas

Hace algún tiempo habíamos visto en una entrada anterior, como colocar unas flechas en el blog para ir a la parte superior del mismo y bajar a la parte inferior, con un suave efecto deslizante usando Scriptaculous.

En esta entrada veremos como hacer lo mismo en las plantillas del Nuevo Diseñador.


[1] Desde Edición HTML de nuestro panel de Blogger localizamos la etiqueta </head> en el código de nuestra plantilla y justo sobre ella pegamos esto:

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

Nota:

Recuerda que si ya estás usando este código (Scriptaculous) para cualquier otro efecto, no es necesario lo coloques de nuevo.
Y recuerda también que si estás usando JQuery en la plantilla, no podrás usar Scriptaculous al mismo tiempo.

[2] Prácticamente al final del código de nuestra plantilla localizamos la etiqueta </body> y sobre ella colocamos el código para las imágenes o flechitas de "ir arriba" e "ir abajo":

<!--Flecha ir abajo -->
<a href='#footer-wrapper' onclick='new Effect.ScrollTo("footer-wrapper",{offset:-140}); return false'><img alt='Ir abajo' border='0' src='URL_DE_LA_IMAGEN_FLECHITA' style='position:fixed; bottom:40px; right:0;margin-bottom: 5px;'/></a>

<!--Flecha ir arriba -->
<a href='#outer-wrapper' onclick='new Effect.ScrollTo("outer-wrapper",{offset:-140}); return false'><img alt='Ir arriba' border='0' src='URL_DE_LA_IMAGEN_FLECHITA' style='position:fixed; bottom:0; right:0;margin-top: 5px;'/></a>

[3] Cambiamos donde dice URL_DE_LA_IMAGEN_FLECHITA por la url de nuestras imágenes o iconos-flecha.

[4] Tendremos ahora que localizar en la plantilla esta línea de código:

<div class='body-fauxcolumns'>

Y la cambiamos por esta:

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

[5] Nos toca ahora localizar esta otra línea de código:

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

Y cambiarla por esta otra:

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

[6] Guardamos los cambios.