Implementing Simple Infinite Scroll on Blogger

Infinite scroll is a popular web design technique that allows new content to load dynamically as you scroll down a page, creating a seamless browsing experience.

This is especially useful for blogs with lots of posts, as it eliminates the need for pagination.

I have written on this before but here's how you can implement a more simple infinite scroll feature on your Blogger site.

What Is Infinite Scroll?

For those who don't know, Infinite scroll prevents the browser's scroll bar from reaching the bottom of the page.

Also View :Adding Dynamic Greetings Widget to Any Site

Instead, the page dynamically loads more content as you scroll. This functionality requires targeting four specific elements in your Blogger template:

Posts container: In most blogger templates, ".blog-posts" is the class for it`

Pagination container: usually classed with ".blog-pager"

"date-outer"

and

Next page link: .blog-pager-older-link

Also View :Embedding Social Media feed on any site

You can adjust these selectors / class to match the HTML structure of your template.

How to Implement Infinite Scroll on Blogger

To add infinite scroll functionality to your Blogger site, follow these steps:

1. Open your Blogger theme editor and locate the closing </body> tag.

2. Copy and paste the following code just above the </body> tag:

Also View :Simple Guess the Number Game - HTML CSS JS

<b:if cond='data:blog.pageType in ["index","archive"]'>

  <script src='https://rawcdn.githack.com/sdavidprince/sdavidprince.github.io/9dcaa68d138ef7daf7d0fe0e8e3c0fb62ad95ecd/infinite%20scroll%20js%202'></script>

  <script>

    //<![CDATA[

    /*! Simple AJAX infinite scroll by S David Prince*/

    var infinite_scroll = new InfiniteScroll({

        type: 2,

        target: {

            posts: '.blog-posts',

            post: '.date-outer',

            anchors: '.blog-pager',

            anchor: '.blog-pager-older-link'

        },

        text: {

            load: '<a class="js-load" href="javascript:;">Load More</a>',

            loading: '<span class="js-loading" style="cursor:wait;">Loading...</span>',

            loaded: '<span class="js-loaded">Loaded.</span>',

            error: '<a class="js-error" href="javascript:;">Error.</a>'

        }

    });

    //]]>

  </script>

</b:if>

Copy

3. Save your changes.