How To Add Load More Posts Button in Blogger

Most of the bloggers add load more posts' button in their blog (website). Some bloggers like to add 'infinite scrolling' which is an advanced form of load more button. Both things perform the same action but the only difference is that you have to press 'load more' button manually, while on the other hand, 'infinite scrolling' do it for you with an automatic system. Basically, this is done with a jQuery script.

How To Add Load More Posts Button in Blogger

     Its working phenomenon is quite simple. Let me explain here one by one. If you apply a 'load more posts' button to your blog, the readers have to click on this button, again and again, to load older posts until the last post. If we talk about 'infinite scrolling', it loads your older posts when a reader scroll down the page and there is no need to press any button manually for this purpose.

How To Add Load More Posts Button in Blogger

Now we should move forward to the actual process to get the desired results. The only thing you have to do is an addition of given code to your source code. Here are simple steps to do it easily.

1. Sign in to your blogger account and choose the desired blog.

2. Click on "Template" and go to "Edit HTML"

3. Click anywhere in the coding area and press 'Ctrl + F' on the keyboard (Mac users will press 'Command + F').

4. A search bar will appear in coding section. In this bar, type "</head>".

5. Now copy the given code and paste it just above the </head> tag.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js'/><b:if cond='data:blog.pageType != &quot;static_page&quot;'><b:if cond='data:blog.pageType != &quot;item&quot;'><script type='text/javascript'>//<![CDATA[!function(a){function b(){h||(h=!0,d?(f.find("a").hide(),f.find("img").show(),a.ajax(d,{dataType:"html"}).done(function(b){var b=a("<div></div>").append(b.replace(k,"")),c=b.find("a.blog-pager-older-link");c?d=c.attr("href"):(d="",f.hide());b=b.find(g).children();a(g).append(b), window._gaq&&window._gaq.push(["_trackPageview",d]);
window.gapi&&window.gapi.plusone&&window.gapi.plusone.go&&window.gapi.plusone.go
();window.disqus_shortname&&a.getScript("http://"+window.disqus_shortname+".disqus.com/
blogger_index.js");window.FB&&window.FB.XFBML&&window.FB.XFBML.parse&&window.
FB.XFBML.parse();f.find("img").hide();f.find("a").show();h=!1})):f.hide())}function c(){var a=Math.max(i.height(),j.height(),document.documentElement.clientHeight),c=i.scrollTop()+i.height()
;0>a-c&&b()}var d="",f=null,g="div.blog-posts",h=!1,i=a(window),j=a(document),k=/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi;a(document).ready(function(){if("item"!=_WidgetManager._GetAllData().blog.pageType&&(d=a("a.blog-pager-older-link").attr("href"))){var g=a('<a href="javascript:;" >LOAD MORE POSTS</a>');g.click(b);i.scroll(c);f=a('<div class="load-more"></div>');f.append(g);f.append(e);f.insertBefore(a("#blog-pager"));a("#blog-pager").hide()}})}(jQuery);//]]></script><style type="text/css">.load-more{display:block;text-align:center;margin:20px auto;}.load-more a,.load-more a:hover{text-decoration:none;font:bold 11px Open Sans, sans-serif;letter-spacing:1px;padding:10px 20px;background:#000000;color:#ffffff;}</style></b:if></b:if>

6. Click on 'Save Template' and check the results. Now a 'load more posts' button should appear on the home page of your blog.

How To Add Infinite Scrolling In Blogger

1. Follow the four steps as mentioned above to reach the </head> tag.

2. Now copy the given code and paste it just above the </head> tag.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js'/><b:if cond='data:blog.pageType != &quot;static_page&quot;'><b:if cond='data:blog.pageType != &quot;item&quot;'><script type='text/javascript'>//<![CDATA[!function(a){function b(){h||(h=!0,d?(f.find("a").hide(),f.find("img").show(),a.ajax(d,{dataType:"html"}).done(function(b){var b=a("<div></div>").append(b.replace(k,"")),c=b.find("a.blog-pager-older-link");c?d=c.attr("href"):(d="",f.hide());b=b.find(g).children();a(g).append(b),window._gaq&&window._gaq. push(["_trackPageview",d]);
window.gapi&&window.gapi.plusone&&window.gapi.plusone.go&&window.gapi.
plusone.go();window.disqus_shortname&&a.getScript("http://"
+window.disqus_shortname+".disqus.com/
blogger_index.js");window.FB&&window.FB.XFBML&&window.
FB.XFBML.parse&&window.
FB.XFBML.parse();window.twttr&&window.twttr.widgets&&
window.twttr.widgets.load&&window.twttr.widgets.load();f.find("img").hide();
f.find("a").show();h=!1})):f.hide())}function c(){var a=Math.max(i.height(),j.height(),document.documentElement.clientHeight),
c=i.scrollTop()+i.height();150>a-c&&b()}var d="",f=null,g="div.blog-posts",h=!1,i=a(window),j=a(document),k=/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi;a(document).ready(function(){if("item"!=_WidgetManager._GetAllData().blog.pageType&&(d=a("a.blog-pager-older-link").attr("href"))){var g=a('<a href="javascript:;" >LOAD MORE POSTS</a>');g.click(b);i.scroll(c);f=a('<div class="load-more"></div>');f.append(g);f.append(e);f.insertBefore(a("#blog-pager"));a("#blog-pager").hide()}})}(jQuery);//]]></script></b:if></b:if>

3. Click on 'Save Template' and check the results. Now your blog will show the older posts with the scrolling of page just like in Facebook or Twitter.

Modifications

You can see a read line in the code. This red line is to use jQuery libraries. So, if you have already added jQuery in your template then please remove this red line because the doubling of this script may cause issues with your website. Here is a step by step guide to check either you already have this or not.

1. Go to your "Template" >> "Edit HTML" and search for jquery.min.js or jquery.js
2. If you already have, it should look like "<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js'/>"
3. Here the version number is 2.2.0. It may be different in the previous script but you can replace this number with other number.

Bottom Line

Okay, you have done a good job. Now you and your visitors can see load more button/infinite scrolling on your website. Post your comments below to give valued feedback or ask a question in case of any confusion.