Skip to main content

How To Add Load More Scrolling To Blogger

How To Add Load More Scrolling To Blogger

Load more scrolling is an excellent way to improve user experience by dynamically loading new posts when users scroll down your Blogger site. Instead of traditional pagination, this feature allows a smooth content flow, keeping visitors engaged for longer.

In this tutorial, we will walk you through adding a "Load More" scrolling feature to your Blogger site using jQuery. This method will help your blog look more interactive and professional.

Read: How To Add Read More Infinite Scrolling To Blogger

Why Use Load More Scrolling in Blogger?

  • Enhances user engagement by eliminating manual page navigation.
  • Reduces loading time and improves website performance.
  • Provides a seamless browsing experience.
  • Encourages visitors to stay longer on your blog.

Now, let’s get started with the step-by-step implementation!

READ ALSO: More Blogger Tutorials

01. Add jQuery to Your Blogger Template

The first step is to ensure that jQuery is included in your Blogger template. jQuery simplifies interactions, making it easy to implement the "Load More" functionality.

Steps to Add jQuery:

  • Copy the jQuery CDN link below.
  • Go to your Blogger Dashboard > Theme > Edit HTML.
  • Paste the jQuery link just above the closing </body> tag.
  • Click Save.

Google CDN Link:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
how-to-add-load-more-scrolling-to-blogger

02. Add Load More Scrolling Script

Now, we will add a script that dynamically loads more posts when the user scrolls down.

Steps to Implement:

  • Copy the script below.
  • Paste it just above the </body> tag in your Blogger template.
  • Save your changes.

Load More Script:

<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'>
      #read-more-btn {
        display: inline-block;
        padding: 12px 25px;
        font-size: 14px;
        font-weight: bold;
        text-transform: uppercase;
        text-decoration: none;
        color: #ffffff;
        background: linear-gradient(45deg, #ff6b6b, #ff4757);
        border: none;
        border-radius: 30px;
        cursor: pointer;
        transition: all 0.1s ease-in-out;
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
      }

      #read-more-btn:hover {
        background: linear-gradient(45deg, #ff4757, #ff6b6b);
        transform: scale(1.00001);
        box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.3);
      }

      #read-more-btn:active {
        transform: scale(0.98);
        box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
      }
    </style>

    <script type='text/javascript'>
      //<![CDATA[
      (function ($) {
        function loadMorePosts() {
          if (!loading && nextPage) {
            loading = true;
            button.find("a").hide();
            button.find("img").show();

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

              $(blogPostsSelector).append(newPosts);
              if (nextLink.length) {
                nextPage = nextLink.attr("href");
              } else {
                nextPage = "";
                button.hide();
              }

              // Re-run scripts if needed
              if (window._gaq) window._gaq.push(["_trackPageview", nextPage]);
              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();

              button.find("img").hide();
              button.find("a").show();
              loading = false;
            });
          }
        }

        function loadDisqus(shortname) {
          $.getScript("http://" + shortname + ".disqus.com/blogger_index.js");
        }

        function initializeLoadMoreButton() {
          if (_WidgetManager._GetAllData().blog.pageType !== "item") {
            nextPage = $("a.blog-pager-older-link").attr("href");

            if (nextPage) {
              var loadButton = $('<a href="javascript:;" id="read-more-btn">More Posts</a>');
              loadButton.click(loadMorePosts);

              var loaderIcon = $('<img src="' + loaderUrl + '" style="display: none;">');

              button = $('<div style="text-align: center; font-size: 100%; margin: 50px 0;"></div>');
              button.append(loadButton);
              button.append(loaderIcon);
              button.insertBefore($("#blog-pager"));

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

        var loaderUrl = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyviUhPRFSSS4_u0JrMEBeS7NE4yLDFCLK7BeTJ-L-P3CW8JmOhCLtKw-8erIoqC4qlnKiJ8wWiROJRXfZkXJqTqUIE7uaZTknG7d74PY4h9uGggiJRtnOkpyqDg_lJ10rsdHvvpEqNow/s32/loader.gif",
          nextPage = "",
          button = null,
          blogPostsSelector = "div.blog-posts",
          loading = false,
          scriptRegex = /<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi;

        $(document).ready(initializeLoadMoreButton);
      })(jQuery);
      //]]>
    </script>

  </b:if>
</b:if>

03. Style the Load More Button

If your code already includes CSS, you can skip this step. However, if you prefer to add the CSS separately, follow the steps below. This will ensure the "Load More" button looks visually appealing on your Blogger site.

Steps to Add CSS:

  • Copy the CSS code below.
  • Go to Theme > Customize > Advanced > Add CSS.
  • Paste the code and click Save.

CSS Code:

<style type='text/css'>
  /* Cool Read More Button */
  #read-more-btn {
	display: inline-block;
	padding: 12px 25px;
	font-size: 14px;
	font-weight: bold;
	text-transform: uppercase;
	text-decoration: none;
	color: #ffffff;
	background: linear-gradient(45deg, #ff6b6b, #ff4757);
	border: none;
	border-radius: 30px;
	cursor: pointer;
	transition: all 0.1s ease-in-out;
	box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
  }

  #read-more-btn:hover {
	background: linear-gradient(45deg, #ff4757, #ff6b6b);
	transform: scale(1.00001);
	box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.3);
  }

  #read-more-btn:active {
	transform: scale(0.98);
	box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
  }
</style>

04. Conclusion

Adding a Load More Scrolling feature to your Blogger site improves usability and makes browsing more engaging. By implementing jQuery and JavaScript, you can create a seamless scrolling experience without requiring pagination.

FAQ:

Load More scrolling provides a smoother user experience by dynamically loading posts without requiring users to navigate to another page.

Yes! The Load More feature is fully responsive and works seamlessly on both desktop and mobile devices.

Absolutely! You can edit the CSS styles to change the button’s color, size, font, and effects to match your blog design.

Ensure that your blog posts use Blogger’s pagination system. If the button doesn’t appear, check the script placement and jQuery integration.

Load More scrolling does not directly harm SEO, but ensure that your site is crawlable by search engines and contains proper internal linking.

Comments

Post a Comment