Ya vimos antes como colocar el "volver arriba" en cada entrada y lo que conseguiremos ahora, es esto mismo pero con un efecto deslizante muy elegante.
Podéis comprobar como funciona una vez aplicado, si pincháis en cualquiera de las flechitas que veis a la derecha en el post-footer (pie de entradas) de mi blog.
"Volver arriba" desde el pie de cada entrada (post-footer).
[1] Si no tenemos Scriptaculous aplicado en la plantilla, lo haremos ahora colocando el código necesario antes de </head> (acordaros que si ya lo estamos usando en algún efecto, no es necesario volver a incluirlo):
<!-- 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-->
[2] Expandimos las plantillas de artilugios y localizamos más o menos esta línea (es donde yo lo he colocado en mi blog):
<p class='post-footer-line post-footer-line-1'>
En algunas plantillas podría mostrarse de esta manera:
<div class='post-footer-line post-footer-line-1'>
[3] Debajo de esa línea colocamos el código para la flechita:
<!--Flecha ir arriba -->
<a href='#outer-wrapper' onclick='new Effect.ScrollTo("outer-wrapper",{offset:-140}); return false'><img align='right' alt='Volver arriba' src='URL_DEL_ICONO_FLECHA' title='Volver arriba'/></a>
"Volver Arriba" desde la parte inferior derecha de la página
[1] Usaremos el mismo sistema que para incluir la flecha o el icono al pie de cada entrada, es decir, incluimos el código del paso [1] si no lo tenemos incluido de usos anteriores.
[2] Desde Edición HTML bajamos casi hasta el final del código de la plantilla y pegamos este código antes de </body>:
<a href='#outer-wrapper' onclick='new Effect.ScrollTo("outer-wrapper",{offset:-140}); return false'><img alt='Ir Arriba' border='0' src='URL_DE_LA_FLECHA_ICONO' style='position:fixed; bottom:0; right:0;' title='Ir Arriba'/></a>
0 comentarios:
Publicar un comentario