How to Add Load More Scroll Button to Blogger Blog

What is A Load More Button?

A "load more" button is a customized dynamic navigation system that is implemented to replace the default blogger blog's pagination so that visitors scroll through to more posts instead. If you are using a custom theme on your blogger website, the probability that you already have a customized load more button is high, however, this does not mean that most custom themes do not use the default blogger pagination system still.

Regardless of either your blogger theme already has a custom load more scrolling button or not, you can always change or incorporate a new button to scale performance.

Why Add A Load More Button in Blogger Blog?

There are a number of reasons for which dynamic load more scroll button is added to a blogger blog but individuals have varying reasons for doing so. The list below contain a few reasons for which individuals may decide to have it incorporated in their blog.

• Potential SEO Benefits
• Better Customization
• Personal Preferences

How to Add A Load More Button in Blogger?

To add a load more button in blogger website, you typically need to modify your blog's HTML source by adding some Javascript which then, dynamically loads more posts when the button is clicked.

The goal of the load more button is to hide and then, replace the existing blogger navigation links. Although you can alter where this button appear on your blog, by default, it replaces the existing pagination links on your blog's:

• Homepage
• Labels Pages
• Search Pages
• Archive Pages

Additionally, in order to match the load more button with your blog's existing design template, you will need to style the load more button using .css so that both may complement one another.

Now, before we go ahead to discuss its potential SEO benefits and best practices, below here I have a beautiful, simple yet sophisticated load more button you can implement on your blogger blog.

Steps to Implement A LoadMore Scroll Button On Blogger Blog

1. STEP 1: Add A jQuery Library to Blogger Template

   jQuery is a light JavaScript library that simplies interactions with HTML elements. jQuery is fast due to its size and feature-rich hence it is perfect for this task.

   To Add jQuery:

   • First, copy this jQuery link:

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

   • Now, go to your Blogger Dashboard > Theme > Edit HTML
   • Within the Blog's HTML scource codes, look for the closing </body> tag and paste the jQuery link just above it.
   • Now, click Save and you are done with the first stage.

2. Add the LoadMore Scroll Button Script to Blogger Template

   Now you can add the script that dynamically loads more posts from your blog as users scroll down the page. It can automatically load more posts as users scroll but, for performance reasons, it is best to alter it such that its loads more posts only when users click on it.

   To Embed LoadMore Button Script:

   • Still within your Blogger HTML Source
   • Copy this Script:

           
     <b:if cond='data:blog.pageType != "static_page"'>
       <b:if cond='data:blog.pageType != "item"'>
     
         
         <script type='text/javascript'>
           //</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>

   • Again, within the Blog's HTML scource codes, look for the closing </body> tag and paste the script just above it.
   • Click Save.

3. STEP 3: Add CSS to Syle the Look of the Load More Button

   Now you can style the load more button using CSS such that the button can blend with the current template design of your blogger website. To do this, you can modify the .css below to your taste.

   To Style the Load More Button:

   • Copy this css code:

     <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:#fff;background: linear-gradient(45deg, #000, #323135);border:none;border-radius:30px;text-align:center !important;cursor:pointer;transition:all 0.1s ease-in-out;box-shadow:0 4px 6px rgba(0, 0, 0, 0.2);}
     #read-more-btn:hover{background: linear-gradient(45deg, #323135, #000);transform: scale(1.00001);box-shadow:0 6px 12px rgba(0, 0, 0, 0.3);}
     #read-more-btn:active{transform: scale(0.98);box-shadow:0 2px 4px rgba(0, 0, 0, 0.2);}
     .varloadmore{display:flex;width:100%;align-items:center;justify-content:center}
     </style>

   • Now, go to Theme > Customize > Advanced > Add CSS.
   • Paste the .css code you copied there and then, click Save.
   • You are now done. Go ahead and preview your blog.

Potential SEO Benefits of LoadMore Scroll Button to Blogger Blog

1. Enhances Crawl Budgets

   Implementing this button means you will be eliminating lots of Blogger's unnecessary links within your blog's body. Links such as updated-max=2022-01-12T04:37:00-08:00--- and ?max-results= would be vastly limited from your blog.

   Especially if you allow search engines index blogger label pages, which is a good thing, implementing this button would potentially maximize your crawl budget thereby letting Google bot index more of blog's contents faster.

2. Improves Visibility

   If your crawl budget is maximized, you automatically get to enjoy more visibility in SERP, according to Google provided all other optimizations are done correctly.

3. Increases Page Views

   Improved crawl rate and better visibility all of this would eventually amount to increase in page views. Besides, users are more inclined to click-through from within your blog if pagination is convenient.

Potential Benefits to User-Experience

• Provides smoother navigation by eliminating default page pagination.
• Encourages More Click-through rate which makes users stay longer on the website.
• Ensures enhanced beautification of the website's navigation system.
• Encourages speedy pageload by optimizing website performance.

Best Practices for Using LoadMore Button in Blogger

1. Utilize centered design. This ensures that users are able to easily spot the button no matter what.
2. Eliminate all updated-max=2022-01-12T04:37:00-08:00--- and ?max-results= links that are manually present within your blog's HTML source. Doing so truly harnesses the button's implementation.
3. Utilize appealing design.
4. Keep the number of posts to be loaded per click "LoadPerClick" minimal.