Load More Button

In practice, every load more button achieve common goals; making nagivating the blog simpler, enhanced browsing experience and making the the blog feels less clunky among others.

But, technically; the best load more button achieves much more. Thus, it also helps your blog score a number of SEO metrics nearly effortlessly.

So, if you want a load more button that does more than fixing the clunky behaviour of the Blogger "Older Posts" link in that; apart from when readers click once and the next batch of posts appears right below the current ones, with no page reload, you need to implement this one.

This guide shows you how to build the best load more button for any Blogspot blog using a small amount of CSS and vanilla JavaScript. For this, you don't need jQuery, a plugin, or any external library and it simply works best.

But before going into the details, I'll touch on how native Blogger pagination works.

How Blogger Pagination Works

Blogger already splits your posts into pages. When you view your homepage, you see the first few posts and a link to the next page of older posts. clicking on the "older posts" link drops you into another view after the page reloads.

On this new view again, you can see a few of the older posts but this time, with links that when clicked; takes you to another page of "older posts" plus another link that takes you to "newer posts". and the cycle continues until the last view that contains the last set of posts.

What this "Best" Load More Button Does

This Load More button works with the existing system in that:

  • It reads the "Older Posts" link that Blogger generates such that when a visitor clicks the button, it fetches that next page in the background.
  • It pulls the posts out of the fetched page and appends them to the current page.
  • It updates itself with the next older-posts link, ready for the subsequent clicks.
  • And when there are no more posts, the button disappears.

On Which Blogspot Pages Does this Work?

Because the script builds on Blogger's own pagination, it works on your homepage, label pages, search results, and archive pages without extra configuration on individual pages.

What this "Best" Load More Button Achieves that Others Don't

  • Optimized for SEO - Although the Blogger's pagination appears hidden to viewers, it remains visible to search engine spiders and bots hence, can be indexed. Additionally, it is readily optimized for canonicalization.
  • Works fine across browsers - even on browsers that disables Javascript by default or old browsers, the button simply falls back to the native pagination links.
  • Optimized for speed - because it is extremely light, it loads as fast as the usual pagination links.
  • Maximum customization.

What You'll Need to Enable this Load More Button on Your Blogspot Blog

  • Admin access to the Blogger Blog.
  • About ten minutes of your time.
  • A backup of your existing theme (should be done first).
  • You do not need to know code. Just the ability to copy, paste and adjust colors - and this if you like.

To Install this Load More Button on Your Blogspot Blog

  1. Step 1: Back Up Your Theme

    Although this step is optional if you can undo changes made to your Blog's HTML template haslefree, but taking a backup of the same template only takes a few seconds. So, backup first.

    To Backup your Theme

    • Log in to Blogger and select your blog.
    • Go to Theme in the left menu.
    • Click the small arrow next to the Customize button.
    • Choose Backup, then Download to save a copy of your current theme to your computer.

    If you notice any unexpected behaviour in your Blogspot blog later, return to the same menu and choose Restore to upload the saved file.

  2. Step 2: Set How Many Posts Load at a Time

    The number of posts each click on the Load More button loads equals the number of posts shown per page on your blog. It's best to set it before you add any code:

    To Set this:

    • Go to Settings in the left menu.
    • Find the Posts section.
    • Set Max posts shown on main page to the number you want.
    • You can choose between 6 and 12 - this works well for most blogs.
    • Save your settings.

    Fewer posts per click feels snappier loading, while more posts means fewer clicks. So, choose the option that works best for you.

  3. Style the Load More Button

    Add the following CSS code to style the button.

    To Add the CSS:

    • Go to Theme.
    • Click the arrow next to Customize and choose Edit HTML.
    • Click anywhere inside the code editor, then search for </head>. You can press Ctrl+F or Cmd+F to search.
    • Paste the following code just above the </head> tag:
    <style>
#load-more-btn {
  display: block;
  margin: 30px auto;
  padding: 12px 36px;
  background: #1a73e8;
  color: #ffffff;
  border: none;
  border-radius: 30px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.1s ease;
}
#load-more-btn:hover {
  background: #1557b0;
}
#load-more-btn:active {
  transform: scale(0.97);
}
#load-more-btn:disabled {
  background: #9aa0a6;
  cursor: wait;
}
#load-more-msg {
  text-align: center;
  color: #777;
  margin: 30px 0;
  font-size: 14px;
}
#blogPager.has-load-more { display: none; }
</style>>

    The CSS lines you just copied from above creates a centered, rounded blue button with hover, click, and loading states. You can change the colors to match your blog's design.

  4. Step 4: Add the Load More Script (JavaScript)

    Again, in the Edit HTML window, search for </body> and copy/paste the code block below just above it.

    <b:if cond='data:blog.pageType != "item" and data:blog.pageType != "static_page"'>

<button type="button" id="loadMore" class="load-more" hidden="hidden">Load More</button>
				
<script type='text/javascript'>
//<![CDATA[
(function () {
  var OLDER = 'a.blog-pager-older, a.blog-pager-older-link';
  var LABEL = 'Load More';

  var pager = document.getElementById('blogPager');
  var loadMore = document.getElementById('loadMore');
  var container = document.querySelector('.blog-posts');
  if (!pager || !loadMore || !container) return;

  var olderLink = pager.querySelector(OLDER);
  if (!olderLink || !olderLink.href) return;

  var nextUrl = olderLink.href;
  var loading = false;

  loadMore.hidden = false;
  pager.classList.add('has-load-more');

  function finish() {
    loadMore.remove();
    var msg = document.createElement('p');
    msg.id = 'load-more-msg';
    msg.setAttribute('role', 'status');
    msg.textContent = "You've reached the end. No more posts to load.";
    pager.parentNode.insertBefore(msg, pager);
  }

  loadMore.addEventListener('click', async function () {
    if (loading || !nextUrl) return;

    loading = true;
    loadMore.disabled = true;
    loadMore.textContent = 'Loading…';

    try {
      var response = await fetch(nextUrl.replace(/^https?:/, location.protocol), {
        credentials: 'same-origin'
      });
      if (!response.ok) throw new Error('HTTP error: ' + response.status);

      var doc = new DOMParser().parseFromString(await response.text(), 'text/html');
      var newPosts = doc.querySelector('.blog-posts');
      if (!newPosts || !newPosts.children.length) {
        throw new Error('No posts found in response');
      }

      // Append the posts' children (not the wrapper), skipping duplicates
      var fragment = document.createDocumentFragment();
      Array.prototype.forEach.call(newPosts.children, function (el) {
        if (el.id && document.getElementById(el.id)) return;
        fragment.appendChild(document.importNode(el, true));
      });
      container.appendChild(fragment);

      // Hook for lazy-load, syntax highlighting, etc.
      window.dispatchEvent(new CustomEvent('postsLoaded', {
        detail: { container: container }
      }));

      // Find the next "older" link in the fetched page
      var newPager = doc.getElementById('blogPager');
      var nextLink = newPager && newPager.querySelector(OLDER);

      if (nextLink && nextLink.href) {
        nextUrl = nextLink.href;
        loadMore.disabled = false;
        loadMore.textContent = LABEL;
      } else {
        nextUrl = null;
        finish();
      }
    } catch (error) {
      console.error('Pagination error:', error);
      // Fall back to Blogger's normal pager
      loadMore.hidden = true;
      pager.classList.remove('has-load-more');
      pager.hidden = false;
    } finally {
      loading = false;
    }
  });
})();
//]]>
</script>
</b:if>

    What the code you just copied/pasted does:

    • The <b:if> wrapper is Blogger's own conditional. It makes the script run only on pages that list multiple posts, such as the homepage, archives, and labels, and skips individual post and static pages.
    • The //<![CDATA[ markers tell Blogger's XML parser to treat the script as plain text. Without them, certain characters can trigger a template error when you save.
    • The selectors at the top tell the script where your posts and pager live. Most themes use .blog-posts and #blog-pager.
    • The fetch step downloads the next page, extracts its posts, and appends them to your current page.
    • The error handler re-enables the button if the connection fails, so readers can try again.

  5. Step 5: Save and Test

    Click the Save icon (the floppy disk) in the top right of the editor. If Blogger shows an error, double-check that you pasted each block in the right place and didn't remove any characters.

    Then open your blog in a new tab and scroll to the bottom of the homepage. You should see your Load More button where the "Older Posts" normally appears. Click it and watch the next batch of posts load in. You should also test it on a phone too, since most blog traffic is mobile.

Customization: to customize the button

  • To Change the Label

    Edit the originalText variable in the script to say whatever you like. You can change it to say; "Show More Articles" or "See Older Stories."

  • To Change the Appearance

    Adjust the background color value in the css to whatever color value that blends well with your theme. You can also change the border-radius to 6px for a more squared button, or increase padding to achieve a bigger tap target.

  • To Change the End "Last Page" Message

    Edit the text inside the finish() function, or remove the message entirely if you prefer the button to just vanish upon reaching the last posts view page.

Frequently Asked Questions:

  1. The LoadMore Button Does Not Appear?

    It is possible that your blog theme uses different class names. To resolve this issue; right-click your posts area in the browser, choose Inspect, and look for the container that wraps all your posts. If it isn't .blog-posts, change postsSelector in the script to match. The same goes for the pager and pagerSelector as they appear in the script.

  2. Blogger Won't Save the Template After the Modifications?

    This is usually caused by a stray character resulting from copying. To resolve this; make sure the //<![CDATA[ and //]]> lines are intact, and that the whole script sits inside the <b:if> block. If it still fails, restore your backup and try again.

  3. Images in New Posts Look Broken or Load Late?

    Some themes use lazy-loading scripts that only run when the page first loads. If images don't display after clicking, your theme's lazy-load script needs to be re-triggered after new posts are added. Check your theme's documentation or search for its initialization function, then call it after the posts are appended.

  4. Ads or Widgets Inside Posts Start Behaving Strangely?

    Scripts inside appended posts won't always run automatically. If you place ad code between posts, test it carefully, and consider keeping ads in sidebars or fixed positions rather than inside the post list.

Answers to SEO and Performance Concerns

SEO Ranking Effect: A common worry is whether a Load More button hurts search rankings. In this setup, it doesn't, for good reasons.

Your older-posts links remain in the page. The script hides Blogger's default pager with CSS rather than deleting it, so search engines can still crawl your paginated pages through normal links. That's the main advantage of this approach over fully custom solutions.

SPEED: Regarding page loads speed, nothing to worry about because visitors only download the first batch of posts at first. Everything else loads on demand, which helps perceived speed, especially on slower mobile connections.

However, it is important to keep your batch size reasonable as loading say; 30 posts at once would defeat the purpose of this setup's performance enhancement. Stay between 6 and 12 posts per click so each request stays small and fast.

Image Optimization: Heavy images are the number one cause of slow Blogger pages. Compress them before uploading, and avoid inserting oversized originals.

What to Use: Load More Button or Infinite Scroll?

You may wonder whether to go further and load posts automatically as viewers scroll down the pages. Infinite scroll can feel smooth, but it has real drawbacks for blogs. Because with Infinite Scroll active, readers can't easily reach your footer and as a result, they lose their place when they return to the page. Moreso, it is harder to get a clear sense of how much content there is.

A Load More button, on the other hand, keeps the reader in control. They decide when to see more, the footer stays reachable, and the page doesn't grow without limit unless they ask it to. For most blogs, especially content-focused ones, Load More button gives a better user experience.

Accessibility Advantages

  • Because the button is a real <button> element, keyboard users can reach it with Tab and activate it with Enter or Space key.
  • The disabled state that's activated during loading prevents accidental double-clicks.
  • With minor customization, your blog passes common accessibility criteria. Because strong contrast is kept between the button text and background, it readily meets common accessibility guidelines.

Conclussion

A Load More button is one of the simplest upgrades you can make to a Blogspot blog that'll almost immediately improve the browsing experience.

More importantly, this whole thing works with Blogger's built-in pagination, so there's nothing to maintain and no outside service to depend on. If you ever change themes, repeat Steps 3 and 4 and adjust the selectors if needed.

Try it out, tweak the styling to fit your brand, and watch how much more naturally readers move through your content. Happy blogging!

Ned help or want to suggest some adjustments for us regarding this post or others, contact us here.