Los botones para subir y bajar, son imprescindibles para aquellas personas que tengan un blog muy extenso con muchas entradas en la página principal, o tengan muchos comentarios en cada post, es una solución muy eficaz para que tus usuarios puedan moverse con más rapidez sin tener que usar la barra de desplazamiento del navegador.Para subir y bajar te damos tres opciones a continuación:
1º La primera opción es simple:
Entra en Diseño,Edición HTML,y antes de </body> pega lo siguiente, este código:
<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, por la flecha que desees. Está resaltado en el código, en verde.2º Sí por lo contrario, lo quieres con forma deslizante, pues en este caso usaremos scriptaculous,(Nota: ojo si ya tienes insertado en tu plantilla este código siguiente, no lo vuelvas a pegar.)estando en Edición HTML lo pegas antes de </head> el siguiente código:
<!-- Prototype y Scriptaculous-->
<script src='http://www.google.com/jsapi'></script>
<script>
google.load("prototype","1.7.0.0");
google.load("scriptaculous", "1.9.0");
</script>
<!-- Prototype y Scriptaculous-->
Ahora antes de </body> inserta el siguiente código que viene a continuación, abajo:
<a href='#outer-wrapper' onclick='new Effect.ScrollTo("outer-wrapper",{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("footer-wrapper",{offset:-140}); return false'><img border='0' src='URL de la imagen' style='position:fixed; bottom:0; right:0;' title='Ir abajo'/></a>
Debes de cambiar la URL, que está resaltado en el código. Y si quieres cambiar la posición de la imagen, para ir más arriba o abajo, es en top:0 y la imagen de abajo, es en bottom:0, cambia el valor numérico, por la posición que desees.3º La tercera opción y última, es una imagen que se posiciona en el pie derecho de la página, y puede subir, el usuario, arriba del todo de la página. Igualmente en Edición HTML antes de </body> colocas a continuación lo siguiente:
<a href='#'><img alt='ir arriba' border='0' src='http://3.bp.blogspot.com/-qW95AZGWcy0/T8tElAGpqQI/AAAAAAAACWs/mi4z_EXiS8U/s1600/subir.png' style='position:fixed; bottom:0; right:0;'/></a>
*Si no te gusta la imagen que viene de ejemplo, la puedes cambiar por la que quieras,con otra "url".*Para encontrar flechas de distintos tamaños,diseños y colores podeis visitar por ejemplo estas paginas:
gifandgif-flechas
thegifcollector-flechas
100pies-flechas.













0 comentarios:
Gracias por comentar.
El comentario se publicará en breve.