Hace pocos días Karla publicó en compartidísimo una forma de hacer scroll infinito en el blog creada por Manki.

Lejos de quitar mérito al autor (que lo tiene, y mucho), para mi gusto este script tenía algunos inconvenientes:

  • Un sistema de obtener los datos poco eficiente: descarga toda la página siguiente para obtener el contenido del post y el link de la página. Aún así me he seguido decantando por este método porque evita editar la plantilla (aunque lo ideal sería usar el feed json de blogger).
  • Conflictos con otras librerías: Si usabas Prototype (por ejemplo) podías irte olvidando de que funcionara.
  • Uso de código innecesario: hay ciertos métodos que proporciona jQuery para ciertas tareas que reducen la cantidad de código.

Forma de uso del nuevo script

A la espera de que el autor fusione los cambios con el script (le he dejado un comentario y parece que lo va a hacer), el uso es el mismo. Sólo tienes que cambiar el script de:

<script type='text/javascript' src='//manki-scripts.googlecode.com/files/blogger-infinite-scrolling-1.5.js'></script>

a:

<script type='text/javascript' src='//dl.dropbox.com/u/71679931/share/blogger-infinite-scrolling/script.js'></script>

O cambiar el contenido del script a mano.

Postdata

Si hay alguna diferencia estilística, es por que en vez de usar estilos en línea para el <div> de carga, he usado la clase load-more, de tal forma que sea más fácil editarlo con el CSS:

.load-more {
	text-align: center;
	font-size: 150%;
	/* Cualquier otro estilo */
}

23 pensamientos en “Scroll infinito en blogger, hecho bien

  1. Imagen de Jesús González el dijo:

    Hola Emilio,

    Una vez más nos vuelves a sorprender con tu conocimiento y control de Java Script, CSS y su aplicación en Blogger cosa que de verdad no es que sea fácil precisamente.

    Para llevarme una mejor idea de este tuto me hace mucha, mucha falta un enlace a una demo.

    Un fuerte abrazo,

    Jesús González

  2. Imagen de Danilo BrownDanilo Brown el dijo:

    Hola Emilio Cobos, es un gusto comentar en este blog, deberas que es excelente, el diseño es muy agradable y mucho mas aun el contenido, lo que publicas, gracias por tu trabajo, yo soy de Colombia y me gusta mucho el HTML, el CSS, el Javascript y quiero aprender Jquery, … y quisiera saber lo que tu sabes porque sabes muchísimo y lo haces todo genial, yo soy lector tuyo y aprendo mucho de tus artículos, solo quería con este comentario agradecerte porque seguro que tu haces este trabajo pensando en ayudar a personas como yo que no saben nada de nada de lenguajes y código, pero que quieren aprender!

    así que gracias por tu trabajo, te envío un saludo desde la fría pero calida Bogota, capital de Colombia, desde el otro continente!

    un abrazo y de nuevo gracias!

  3. Imagen de Remy el dijo:

    Hola Emilio.
    Queria ver si me puedes ayudar a quitar el bendito infinity scroll de este blog:
    HD Wallpaper |
    Realmenta la funcion es muy interesante, pero para lo que necesito en esta pagina no me funciona, crees que me puedes echar una mano pa quitar ese scroll.

    Feliz dia!

  4. Imagen de Pepe marPepe mar el dijo:

    Seria posible mostrar el botón de twitter, solo me sale un texto y estado mirando el script y de twitter no sale nada, podrías pasarme un código para que funcione, gracias.

    Un saludo.

      • Imagen de Pepe marPepe mar el dijo:

        Gracias, pero sigue sin funcionar, el botón que uso:

        <a class='twitter-share-button' data-count='horizontal' data-lang='es' data-via='tuusuario' expr:data-text='data:post.title' expr:data-url='data:post.canonicalUrl' href='http://twitter.com/share'>Tweet</a>
              <script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>

        Sera el problema, por que no sale, solo texto.
        Perdone que lo moleste de nuevo.

  5. Imagen de cyberhollycyberholly el dijo:

    Funciona, pero hay un problema, y es que las entradas que salen nuevas cuando se escrollea hacia abajo aparecen enteras, y no en formato reducido que es como salen en la pagina de inicio. ¿Hay forma de que salgan reducidas? Tal y como salen las primeras de la lista? Gracias y buen trabajo.

  6. Imagen de Fernando el dijo:

    Buenas Emilio muchisimas gracias!, te quería pedir una ayuda, sabes que linea debería borrar del script para que no cargue los posts al bajar con el scroll? para que así únicamente funcione dándole click a load more posts.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Puedes usar las siguientes etiquetas y atributos HTML:<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre data-language=""> <ul> <ol> <li>
Para poner código usa <pre data-language="[lenguaje]"><code>[código]</code></pre>, y no olvides escapar el HTMl.