Muchos de los temas o themes que se encuentran para Blogger o están incompletos, o encontramos grandes problemas a la hora de modificar el código. Llegado el caso de tener un blog extenso en contenido, nuestro usuarios van a querer volver al principio del post una vez finalizada la lectura del mismo.
En estos casos lo mejor que podemos hacer es un simple botón que aparezca cuando el usuario no se encuentre al principio del post o la pagina. Gracias a JQuery y CSS3, el diseño y la función del botón sera mas ágil.
El siguiente tutorial muestra como agregar el botón para volver arriba en Blogger, aunque muy fácilmente es adaptado a cualquier pagina web. Para hacer mas fácil el uso del mismo existen dos posibilidades de instalar el siguiente botón para volver arriba:
- Modo Fácil: Solo copiar y pegar el código. Realizando modificaciones en el color.
- Modo Complejo: Ir Copiando por partes en nuestro tema modificando el código HTML/XML de Blogger.
Ninguna de las dos maneras es difícil, solo que una lleva mas tiempo que la otra y el resultado es el mismo. Comencemos con el método mas complejo, para explicar en que consisten las partes del mismo:
Instalar Botón Volver Arriba en Blogger
Requisitos:
Lo primero en tener en cuenta, es que necesitaremos tener el plugin de jQuery instalado en nuestro tema de Blogger. Si no estas seguro de tener el plugin instalado, intenta lo siguiente:
– Dentro del panel principal de Blogger, entra en Plantilla y luego dale click a “Editar HTML“
Lo siguiente sera tocar (Ctrl + F) dentro del código, para conseguir buscar “.js” hasta encontrar algún script que contenga el nombre de jQuery. Si tu búsqueda falla deberás agregar el enlace de jQuery de la siguiente manera, tal como se muestra en la imagen:
<script src='http://code.jquery.com/jquery-2.1.4.min.js'/>
Una vez que tenemos nuestro jQuery funcionando en nuestro blog, vamos a agregar el estilo del botón para volver arriba, en mi caso lo voy a hacer redondo para que salga en el margen derecho inferior de mi pagina web:
<style> a.upbt { background: #94C2F9 url('https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-up-01-32.png') no-repeat scroll 50% 50%; height: 48px; padding: 10px; width: 48px; position: fixed; border-radius: 100%; transition: background-color 500ms ease 0s; bottom: 45px; right: 50px; display:none; } a.upbt:hover{ background-color: #398969; } </style>
- Los colores del botón se cambian en a.upbt background: #9462F9 y en a.upbt:hover background-color: #398969. El primero es el color natural del botón, mientras que el hover es el color al posicionar el mouse encima del mismo.
- El tamaño del botón se cambia, modificando el height y el width de a.upbt.
- Los margenes se cambian en bottom (que nos dice a cuantos píxeles del fondo se va a poner el botón) y right (lo mismo pero desde la derecha).
- Por ultimo, el icono se cambia en la url de la propiedad background.
El código del style puede ir colocado justo debajo de la carga del jQuery para mayor comodidad a la hora de editar. El siguiente paso sera hacer que nuestro botón aparezca en la pantalla cuando el usuario baje la barra de navegación lateral y se encuentre navegando.
Lo primero que debemos hacer es crear un botón en HTML, y para eso copiamos el siguiente código y lo pegamos dentro del Body del tema, el nombre de “class” del siguiente botón es upbt, recordemos que en este tutorial usaremos ese nombre para llamarlo en JavaScript:
<a class="upbt" href="#"></i></a>
Ahora solo nos quedaría insertar el código de JavaScript para que nuestro botón tenga la función de volver arriba. El siguiente código debe estar justo antes de que nuestro Body se cierre, tal como se muestra en la siguiente imagen:
<script> $(document).ready(function() { var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; var height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; $(window).scroll(function() { if ($(this).scrollTop() > height / 2) { $('.upbt').fadeIn("slow"); }else{ $('.upbt').fadeOut("slow"); } }); $('.upbt').click(function() { $("html, body").animate({ scrollTop: 0 }, 600); return false; }); }); </script>
Expliquemos para que funciona cada parte del script.
- var width, height: Estas dos variables determinan el tamaño de la pantalla que se esta usando. No determinan el tamaño de la pagina.
- if ($(this).scrollTop() > height / 2): Si la barra lateral esta en una posición mayor al tamaño de la pantalla dividido 2, va a mostrar el boton de “class” upbt. Caso contrario lo oculta.
- $(‘.upbt’).click(function(): Al darle click al botón upbt, hace que la pagina en 0.6segundos (600ms) llegue a la parte de arriba. Es posible cambiarle la velocidad de la animación.
Para terminar, “Guardamos Plantilla” y nuestra pagina en Blogger va a tener un botón para volver arriba hecho en CSS + JQuery.
Ahora bien, el modo complejo de realizar el tutorial ha sido ese. A continuación te muestro la manera fácil de realizar el tutorial.
Vamos a “Diseño” de nuestra plantilla en Blogger, y agregamos un nuevo Gadget de HTML en la parte inferior de la pagina.
Luego, copiamos el siguiente código y lo pegamos. Guardamos el gadget y debería funcionar de la misma manera que en el modo anterior.
Código Completo:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script> <style> a.upbt { background: #94C2F9 url('https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-up-01-32.png') no-repeat scroll 50% 50%; height: 48px; padding: 10px; width: 48px; position: fixed; border-radius: 100%; transition: background-color 500ms ease 0s; bottom: 45px; right: 50px; display:none; } a.upbt:hover{ background-color: #398969; } </style> </head> <body style="height:25000px;margin:0;background-color:#303030;"> <a class="upbt" href="#"></i></a> <script> $(document).ready(function() { var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; var height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; $(window).scroll(function() { if ($(this).scrollTop() > height / 2) { $('.upbt').fadeIn("slow"); }else{ $('.upbt').fadeOut("slow"); } }); $('.upbt').click(function() { $("html, body").animate({ scrollTop: 0 }, 600); return false; }); }); </script>
Nuestro resultado final, sera un bonito diseño de botón para volver arriba hecho en CSS y jQuery para Blogger, aunque muy fácilmente se puede adaptar a todo tipo de paginas web ya sean HTML o WordPress.
