AJAX Load More Posts Plugin for Blogger

In this tutorial you will be able to implement AJAX Load More Posts button on your own blog. There are lots of blogger plugins similar to this one but this AJAX plugin is the most efficient that is both fast and bugless.

Introduction

For non-coders if you're wondering what AJAX is, AJAX is short for Asynchronous JavaScript and XML, this is an important front-end web technology that lets JavaScript communicate with a web server. It lets your visitors load new contents without leaving the homepage. It has tons of uses but in this tutorial we will just tackle on how you could add a simple load more posts button on your own blogger blogspot. In order to do so, you just need to follow these steps!

Note: Jquery Library is needed as this runs with AJAX.

Live Demo

Demo

Choosing your Spinner

 Go to Loading.io
 Login using your Google Account or Facebook Account
 Select a Free Spinner/Loader
 Customize the spinner to adapt your theme's design
 Once you're done, hit the CSS button under the Download
 Click on Free Download
 Then select all the text inside the Spinner.Html that will popup to your screen
 And finally, Copy the text (ctrl+c)

Adding the Spinner

 Go to Blogger » Template » Backup your Template » and Edit HTML
 Search and Look for (ctrl+f) <b:include name='nextprev'/>
Note: This tag might have multiple occurrences (Find the one with parent the <b:if cond='data:blog.pageType != "item"'>)
 Paste the code you have copied earlier before <b:if cond='data:blog.pageType != "item"'>

JScript

 Find (ctrl+f) </body>  Copy and Paste the following JScript before it

<b:if cond='data:blog.homepageUrl == data:blog.url'>
<script type='text/javascript'>
var spinner = $('.lds-css');
spinner.wrap("<div class='loadMore'><div id='loader' style='display: none'></div></div>");
spinner.parents('.loadMore').prepend("<div class='loadMorePosts'><a class='loadMoreButton' href='#'>Load More Posts</a></div><div class='noMorePosts' style='display: none'><span>No More Posts to Load</span></div>");
$('#blog-pager').hide();
var olderLink = $('a.blog-pager-older-link').attr("href");
if(olderLink)
$('.loadMorePosts').show();
$('.loadMorePosts a').on('click', function(e){
 $('.loadMorePosts').hide();
    $.ajax({
        url: olderLink,
        success: function(html){
   var res = $(html).find('.blog-posts');
   res.children(".status-msg-wrap").remove();
            $('.blog-posts').append(res.html());
   olderLink = $(html).find('.blog-pager-older-link').attr("href");

   if (olderLink)
    $('.loadMorePosts').show();
   else $('.noMorePosts').show();
        },
  beforeSend: function() {
   $('.loadMore > #loader').show();
  },
     complete: function(){
         $('.loadMore > #loader').hide();
  },
    });
e.preventDefault();
});
</script>
</b:if>

 Save your Template

Final Words

You may customize the button by adding some css styles to it as well as changing the text within it by replacing the words "Load More Posts" and "No More Posts to Load" included on the JScript you added. If you have questions or have encountered any problem while installing this plugin, do not hesitate on leaving a comment or contacting us to assist and help you further. That's all for me, Happy blogging!