3 de noviembre de 2009

Botón ir arriba

Puesto que suele estar en las primeras posiciones del blog lo más interesante, y sobre todo, para ayudar a que sea lo más navegable posible, he incluido un botón en la parte inferior derecha de la pantalla para volver arriba consiguiendo un efecto scroll muy elegante.  Como en tantas ocasiones El Escaparate de Rosa ha sido de gran ayuda.

Para ello hay que incluir antes de </head> el siguiente código que cargara el script Scriptaculous, si no se ha usado antes para algún otro efecto:

<!-- 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—>

Para acabar hay que insertar la imagen que queramos en una posición fija en la pantalla.  Antes de la etiqueta </body> y con Expandir plantillas de artilugios marcado, poner las siguientes líneas:

<!-- BOTON FLECHA ARRIBA -->
<a href='#outer-wrapper' onclick='new Effect.ScrollTo(&quot;outer-wrapper&quot;,{offset:-140}); return false'><img alt='Ir Arriba' border='0' src='Url-de-flecha-arriba
' style='position:fixed; bottom:0; right:0;' title='Ir Arriba'/></a>

Sustituir la Url de la imagen que tengas seleccionada y ya se puede guardar la plantilla.

En las plantillas nuevas de Blogger también habrá que hacer lo siguiente:

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'>

Entrada anterior Entrada siguiente Página Principal
Related Posts Plugin for WordPress, Blogger...