Colocar una flechita en la esquina de nuestro blog para subir arriba
Esto es muy útil para aquellas personas que realizan entradas extensas o bien en su página principal muestran unas 6,7,8 entradas o aun más. Entonces los lectores comienzan a hacer scroll hacia la parte inferior de nuestros Blogs mientras leen y luego tienen que regresar hacia el principio. Por eso le vamos a ofrecer la opción de clickear sobre la flechita para arriba y que vuelvan hacia el top de nuestro blog con un solo click. Si queremos hacer esto vamos a seguir los siguientes pasos:
1) Vamos a Plantilla
2) Luego a Edición de HTML
3) Buscamos </body> (recuerden que con Ctrl + F abrimos el buscador)
4) Justo antes de </body> pegamos el siguiente código:
5) Ahora visitamos esta página: iconfinder.net
6) Una vez que hayamos entrado, en Search, colocamos "up" y nos va a aparecer una gran lista de flechas para elegir.
7) Una vez que hayamos elegido una, le damos click y nos va a dirigir a otra página con esta flecha. Ahora le damos click derecho a la flechita y copiamos la ruta de enlace. Se ve de esta forma:
8) Ahora lo único que hacemos es pegar la ruta de enlace que copiamos en la parte que les dejé marcado con rojo en el paso 4.
Un ejemplo de cómo tendría que quedarnos el código sería algo así:
9) Ahora como siempre, ponemos "Vista previa" y si en la plantilla está todo bien entonces guardamos los cambios y ya vamos a poder disfrutar de nuestra flechita.
Espero que les haya sido de utilidad, saludos!
------------------------------------------------------
Forma simple
Entra en Plantilla | Edición de HTML y antes de </body> pega lo siguiente:
<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 donde se indica; el primer código corresponde al botón de Ir Arriba, el segundo al de Ir Abajo.
Efecto deslizante
Para que al subir y bajar tenga un efecto deslizante necesitaremos Scriptaculous, así que estando igual en la Edición de HTML pega antes de </head> el siguiente código:
NOTA: Si ya lo tienes en tu plantilla no es necesario pegarlo de nuevo.
<!-- 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> pega lo siguiente:
<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>
De igual modo hay que cambiar la URL de la imagen tomando en cuenta que el primer código es para el botón de Ir Arriba y el segundo para el de Ir Abajo.
Los botones estarán uno en la parte superior derecha y otro en la parte inferior derecha, si deseas que ambos estén en medio de la pantalla entonces en el código de la imagen de "Ir Arriba" verás que dice top:0; eso cámbialo por otro valor como top:250px;
Y en botón de "Ir Abajo" dice bottom:0; eso cámbialo por top:490px;
ACTUALIZACIÓN:
En cualquiera de los dos métodos (simple o deslizante) si usas una plantilla nueva del Diseñador de plantillas de Blogger entonces tendrás que 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'>
Con eso funcionará también en esas plantillas.
Aquí les dejo unos íconos que pueden utilizar para sus botones.
0 comentarios:
Publicar un comentario
muchas gracias por comentar ;)