Si ya has probado las vistas dinámicas de Bogger, o por lo menos, las has visto funcionar en algunos blogs como en Blogger Buzz, seguramente te habrás dado cuenta que no utilizan los enlaces de navegación (Entradas antiguas, Página Principal, Entradas recientes) en la página principal, ya que las entradas se van cargando al desplazarse hacia abajo, a eso se le conoce como scroll infinito.
El scroll infinito, puede hacer que la página sea más accesible, y mejorar la experiencia del usuario, ya que éste no tendrá que cargar entradas nuevas haciendo click en el enlace de navegación, pues todas las entradas (o su resumen) se cargarán desde la página principal.
Ejemplos de sitios en los que se ha implementado la técnica de scroll infinito.
Sitios como Tumblr, Looks Like Good Design, Spookbook.nu son ejemplos de sitios que utilizan ésta técnica y que ha sido muy bien aplicada, y seguramente te inspiraran para saber cómo implementarla para que armonice con el diseño del blog. Esta técnica es ideal para blogs de fotografía, diseño y moda, ya que las imágenes ocupan un papel protagónico, aunque puede implementarse en cualquier blog.
Scroll infinito en las plantillas de Blogger...
¿Te gustaría probar esta función en tu blog? pues ahora puedes hacerlo, ya que Muthu kannan de manki's weblog, ha desarrollado un script que funciona con jQuery , el cual, hace que todas las entradas del blog se carguen desde la página principal, al desplazarse hacia abajo.
Mathu Kannan ha estado desarrollando el script de forma constante, implementando mejoramientos como soporte a Google analytics, el sistema de comentarios de Disqus, y botones de Facebook.
Desde su página puedes agregar ésto al blog fácilmente, así como también verlo funcionar, ya que él lo usa.
Cómo agregar el scroll infinito al blog.
Opción 1. Agregar el artilugio (gadget). La opción más fácil y rápida.
1. Simplemente vas a la página del autor, y haces click en el Botón que dice "Add to Blogger".
2. Eliges el blog al que quieres agregar ésta función.
Nota: Si ya tienes jQuery en tu blog, haces click en donde dice "Editar contenido" y lo eliminas. Hasta la fecha viene así (versión 1.6.1):
<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>
3. Añades el artilugio.
El código será agregado a tu blog, y podrás editarlo/eliminarlo desde Diseño, editando el gadget que se agregó con la opción HTML/Javascript.
Opción 2. Agregar el script directamente a la plantilla y editar el texto de "Load more posts" e imagen.
1. Agregas jQuery en tu blog, si es que no lo tienes en el blog. (He añadido la versión más reciente).
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
2. Abres el contenido del archivo que facilitan (script), y lo copias. Para abrirlo tienes que poner la dirección del archivo en la barra de direcciones.
Opcional. Puedes editar el texto que dice: "Load more posts" por otro, como por ejemplo: "Cargando posts", identificando ésta linea en el script y cambiándolo:
var link = $('<a href="javascript:;">Load more posts</a>');
...si también quieres cambiar la imagen (el gif animado que aparece a un lado del texto de "Load more posts"), sólo identifícala en el script en la siguiente linea, y cámbiala por una propia. He resaltado la URL de la imagen de rojo:
var b=$('<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4Dvg0yng8EpTw9ePKTTZIsO4xwxJBeCi0YWlOfe1HfdbJOn78C8B727y_K_iBiD1NNwoQaAJaSxTU2hW6x2vtJgu8orUabny4BWgstZGXia0kI6AF-yNo43mRKKa8wwm83ztY-jl8RdB3/s32/ajax-loader.gif" style="display: none;">');
2. Ya que lo copiaste/editaste, lo pones debajo de jQuery, dentro de la etiqueta script, como se indica a continuación:
<script type='text/javascript'>
//<![CDATA[
//Aqui el contenido del archivo
//]]>
</script>
4. Verificas en vista previa y si todo luce bien guardas los cambios.
Opción 3. Alojando el script.
1. Agregas jQuery, si es que no lo tienes en el blog.
2. Abres el script que facilitan, y si quieres, editas el texto y cambias la imagen (el gif animado), para luego guardarlo en tu computadora.
3. Alojas el script y copias la URL de éste, luego lo agregas al blog, después de jQuery:
<script type='text/javascript' src='//mi_arcivo.js'></script>
4. Verificas en vista previa y si todo luce bien, guarda los cambios.
Notas adicionales
Cabe señalar que, en conjunto con ésta técnica, sería bueno hacer algunas modificaciones en la presentación de los enlaces de navegación de Blogger al ingresar a la página, colocándolos de forma estratégica, y cambiando su apariencia.
Via: manki's weblog
No hay comentarios:
Publicar un comentario