How To Add Infinite Scroll In Blogger

Infinite Scrolling is an effect through which all the posts will be shown as the user scrolls down.

After installing this on your blog, when you will land on the homepage, first you will see the minimum posts on homepage which you've set. As you scroll down, automatically more posts will load with loading effect. This will help the readers to get even more content instantly and your readers will be served better. It is built with pure JavaScript and JQuery. Actually, This JQuery replaces the older and newer page navigation links with the effect and if you've installed this effect then those page navigation will not appear on the homepage only. This may not work in your template if you've not implemented auto post thumbnail with the read more button script. 

                                                                       SEE DEMO

Let's Start To Add It-

1- Go To Blogger Dashboard > Backup Your Template2-Click Edit HTML3-Find </head>

4- Paste The Following Code Above </head> 

<b:if cond='data:blog.pageType == "index"'> <script src='//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'/> <script src='https://bloggeryard.googlecode.com/svn/trunk/Infinite%20Scroll%20Plugin.js' type='text/javascript'/> <script type='text/javascript'> jQuery.iasundefined{ container : '.blog-posts', item: '.post-outer', pagination: '#blog-pager', next: '#blog-pager-older-link a', loader: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAURdLMAZpfl_wT7O80P10PlKVBoqg6HPjnyLYJN8WXQQKDMdFjP7uTx1vk7szWGnrGuHNJr1Zf1FCXAR6WpBGSDIOTuCw-iE65hN2lx-GCH_UFXyhWTNuHK-dU911QBCD2n8LLDk5TR82/s1600/loading.gif' }); </script> </b:if>

5- Replace The Highlighited Code With Image Url Shown Below Or Of Your Choice-

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRn24L2uIz_qyXAz69waKs81o2kuU4IeJc3-D23tjPKwE6F6z3u6yrUciP_EvdnQaPsfbufrBKCeNm-NgpPlBtq3HOBeLc4jN5j-QnAe7Hho85ACDR8KonRfXGhbl7hJ-BgqTEwFRBNKlw/s1600/Round+Loader.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVgxILDrTc0DI7p_9Z7Ob6_GIYazixSKj-sIFumD7EtlXFCuMkS7h2FXezkakvEE5bMvHztCIvXVtW5OHyzrlBw8w_YuD8LJ99LG-gaZzY_ceaED7rMDsG-ABOHnaQH8QmIsMaplT8hdd4/s1600/arrow+loader.gif

http://www.ajaxload.info/cache/FF/FF/FF/00/00/00/1-0.gif

Finally Click Save