How To Add Read More Infinite Scrolling To Blogger

Infinite scrolling is a powerful feature that enhances user experience by automatically loading new posts as the visitor scrolls down the page. Instead of clicking the "Read More" button or navigating through multiple pages, users can seamlessly explore your blog content in a continuous flow.

This tutorial will guide you on how to add Read More Infinite Scrolling to your Blogger site using jQuery and JavaScript. By implementing this feature, your blog will look more modern and engaging, keeping visitors on your site for longer.

Read: How To Add Load More Scrolling To Blogger

Key Benefits of Infinite Scrolling in Blogger:

Eliminates the need for pagination.
Enhances user engagement by providing a seamless browsing experience.
Loads content dynamically, improving navigation.
Makes your Blogger site look more professional and interactive.

In the following steps, we will cover everything you need—from adding jQuery to integrating the Infinite Scroll script into your Blogger template. Let’s get started!

READ ALSO: All Blogger Related Articles

01. Add jQuery Into Blogger

Adding jQuery to Blogger is the first and most important step for implementing the "Read More Infinite Scrolling" feature. jQuery allows smooth interactions and animations, making it easier to handle automatic loading of posts.

Follow these steps to add jQuery to your Blogger template:

Copy the jQuery CDN link provided below.
Open your Blogger Dashboard and navigate to Theme > Edit HTML.
Paste the copied jQuery link just above the </body> tag.
Save your changes.

This simple step will enable jQuery functionality on your Blogger site.

Google CDN Link:

To include jQuery in your Blogger template, use the following Google-hosted CDN link:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

how-to-add-read-more-infinite-scrolling-to-blogger-theme

02. Infinite Scrolling Code


<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js'/>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
  <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <style type='text/css'>
      .status-msg-wrap {
        display: none;
      }
    </style>

    <script type='text/javascript'>
      //<![CDATA[
      (function ($) {
        function loadDisqus(shortname) {
          $.getScript("http://" + shortname + ".disqus.com/blogger_index.js");
        }

        function loadMorePosts() {
          if (isLoading) return;
          isLoading = true;

          if (nextPageUrl) {
            loaderContainer.find("a").hide();
            loaderContainer.find("img").show();

            $.ajax(nextPageUrl, {
              dataType: "html"
            }).done(function (response) {
              var content = $("<div></div>").append(response.replace(scriptRegex, ""));
              var newPosts = content.find(blogPostsContainer).children();
              var nextLink = content.find("a.blog-pager-older-link");

              $(blogPostsContainer).append(newPosts);

              if (window._gaq) window._gaq.push(["_trackPageview", nextPageUrl]);
              if (window.gapi && window.gapi.plusone) window.gapi.plusone.go();
              if (window.disqus_shortname) loadDisqus(window.disqus_shortname);
              if (window.FB && window.FB.XFBML) window.FB.XFBML.parse();
              if (window.twttr && window.twttr.widgets) window.twttr.widgets.load();

              nextPageUrl = nextLink.length ? nextLink.attr("href") : "";
              if (!nextPageUrl) loaderContainer.hide();

              loaderContainer.find("img").hide();
              loaderContainer.find("a").show();
              isLoading = false;
            });
          } else {
            loaderContainer.hide();
          }
        }

        function getPageHeight() {
          return Math.max(
            $window.height(),
            $document.height(),
            document.documentElement.clientHeight
          );
        }

        function checkScrollPosition() {
          if (getPageHeight() - ($window.scrollTop() + $window.height()) < 150) {
            loadMorePosts();
          }
        }

        function initLoadMore() {
          if (_WidgetManager._GetAllData().blog.pageType === "item") return;

          nextPageUrl = $("a.blog-pager-older-link").attr("href");

          if (nextPageUrl) {
            var loadMoreButton = $("<a href='javascript:;'>Load more posts</a>");
            loadMoreButton.click(loadMorePosts);

            var loadingImage = $("<img>", {
              src: loadingGifUrl,
              style: "display: none;"
            });

            $window.scroll(checkScrollPosition);

            loaderContainer = $("<div>", {
              style: "text-align: center; font-size: 150%;"
            }).append(loadMoreButton).append(loadingImage);

            loaderContainer.insertBefore($("#blog-pager"));
            $("#blog-pager").hide();
          }
        }

        var loadingGifUrl =
          "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIANp7EvgbJ67DKij1JVWnF_Gg5MYNa5qevrUVntQHG1FqFkCfDM-mfUvE8n3cQIp5chTXbUAX_KacbiAm-zLpEp0EVSJPatSWDVMKf9_c5iB7IWfnVJJ3M9IS3rGPJSmFsNdn0-atNsxQu_mgdqx_dmv8R7iks7XzmjDMVshfVl-CbNikDpjOlmTjPJk/s1600/loading-gif.gif";

        var nextPageUrl = "";
        var loaderContainer = null;
        var blogPostsContainer = "div.blog-posts";
        var isLoading = false;
        var $window = $(window);
        var $document = $(document);
        var scriptRegex = /<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi;

        $(document).ready(initLoadMore);
      })(jQuery);
      //]]>
    </script>
  </b:if>
</b:if>

03. Conclusion

And that's it! By implementing Load More Posts or Infinite Scrolling in Blogger, you can enhance user experience by allowing visitors to seamlessly browse through an unlimited number of posts without leaving the page. This not only improves engagement but also creates a more dynamic and interactive browsing experience.

FAQs

Can I use this code in my Blogger?

Yes, you can use this code.
Will this affect my blog's loading speed?

No, the script is optimized for performance and does not significantly impact loading speed.
Is this feature mobile-friendly?

Yes, the code is responsive and works seamlessly on both desktop and mobile devices.
Does this work with all Blogger themes?

Most modern Blogger themes support this feature. However, if you face issues, you may need to adjust the selectors accordingly.
How can I revert back to the default pagination?

If you want to remove infinite scrolling, simply delete the script from your Blogger template and restore the default pagination settings.

RELATED POST: