Magazine

Añadir un Scroll Infinito en Blogger

Publicado el 10 diciembre 2013 por Aizum Blog @aizumblog
Añadir un Scroll Infinito en Blogger
Hoy me gustaría resaltar un tip o un truco que me imagino que a alguien le pueda interesar aplicarlo en su blog de Blogger, es bastante interesante el resultado final y estético, trata de un efecto en el scroll que mediante se va bajando con la barra de desplazamiento lateral o scroll bar antes de que llegue al final de la página se vaya cargando más elementos y posts automáticamente, infinitamente. Esto hará que eliminemos así la necesidad de tener que dar clics en los enlaces de paginación. Para aplicar este truco de scroll infinito en tu blog de Blogger es muy sencillo, deberás de ir a Editar Html en tu plantilla de Blogger. Ahora la demo...
Demo Scroll Infinito!
Ahora vayamos a insertar el script antes de </head>:
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
<script src='https://dl.dropboxusercontent.com/u/48457927/infinitescroll.js' type='text/javascript'></script>
<script type='text/javascript'>
jQuery.ias({
container : '.blog-posts',
item: '.post-outer',
pagination: '#blog-pager',
next: '#blog-pager-older-link a',
loader: 'http://www.henley-putnam.edu/Portals/_default/Skins/henley/images/loading.gif'
});
</script>

Configuraciones a resaltar importantes y relevantes:
  1. La primera línea de código es jQuery, y si ya tienes instalado jQuery en tu plantilla, pues omite la primera línea de código, esto es debido a que puede ser que tengas otra versión más actualizada u obsoleta o también la misma versión, que puede y seguramente te cree conflictos, y dicho efecto no se podría visualizar correctamente, es decir no se vería. Luego hospeda tu propio archivo script, por ejemplo en Dropbox y añade la URL publica proporcionada por Dropbox en el código resaltado, este es el script .js que menciono:
  2.  https://dl.dropboxusercontent.com/u/48457927/infinitescroll.js 
  3. Eso es todo amigos, espero que os funcione y que os guste estre truquillo. Este truco hará que el lector tenga una experiencia mucho mas amena e interactiva, ya que este sistema lo usan sitios de talla de Facebook o Twitter, entre otros lugares importantes. Comentar si tenéis alguna duda, gracias.

Get free premium widgets for your blog and website.

Volver a la Portada de Logo Paperblog

Dossier Paperblog