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