How To Add Infinite Scrolling Effect In Blogger

How To Implement?

Installing this plugin in your blog is really left hand work. It is already built so you don't need to develop the code. So just follow the below given tips to get it in your blog.

1. Go To Blogger >> Template >> Backup Your Template
2. Click Edit HTML >> Find For </head>
3. 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.ias({
    container : '.blog-posts',
    item: '.post-outer',
    pagination: '#blog-pager',
    next: '#blog-pager-older-link a',
    loader: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKfvT2B-CpRaB_ex1fwkm7oI6vwTrGuLiLWErGmALbzbmlQKHvBiJ7kOIbpNYu3ZLQRlUJsN43W-qAuIrQgWgSAz0GYLmpuVQ4Xtx4U1Jua78ntxCf9lo8Q4nl77vS0bBBB6ziSFTUXSUq/s1600/loading.gif'
});
  </script>
</b:if>

1. Replace The Highlighted Link With Any Loading Image. Copy The Loading GIF Image URL From The Following.
2. Hit "Save Template!".

AJAX Loader GIF Images

Below I've listed some loading images. Just copy their URL and replace it with the yellow highlighted code.

Round Loader 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjN0d56rLDGDSBTsQx7h7gPh62gBypPUt26NiLxdxRh0yCNU1kuub6K4vhU7kIqwdf8-ddPi9ZSvCMHne21GAIBV1fEwqZLSNuqJswAB_yiXiMrZT71KU0cHKX0xTGKF-UFXAXpNpGsm1P1/s1600/Round+Loader.gif

Rounding Arrows

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizB5mDUGa_kgTa2pKXsuh8lOH8DhwVCscgJXv-yh6nKc977qleNSlsodBRwV_4nIufErfcDhkbVS6Iy4N5aOAtPu78Gzlb9JEMtmoXSHeM_f-ZXe8d66-P4p5o3uX5EBGcIvyFNArJgFPK/s1600/arrow+loader.gif

 Silver Arrows Circle

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrgnRVwDPy08k_SEYCDTxUKrhOPit9hZQm0xRlTOKEDUbdU_ywL5A_VdaTkJQxDRQw453XLPw18HbAM8pCyebG8sycwzGIj0YwGcNASxhEu4NcFU64caEEkObcbxr4lfk_TiF3QhjvB3wp/s1600/silver+arrows+circle.gif

Cool Blue Rouding Arrow

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic69U7NE1QjklppriwFva1cKsFFnV0yA8iXv2VG0xPGluqol-DFf6tgAUm_1em816NNeaETx40Zh9YGGpHns_qcGF0vzgfm-CRSDylHC-KsfpaaJob6dopGJrAeikNaQ9IO1jcsC5Tc6nB/s1600/blue.gif

Red Loader

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsU_IjeQUAMa153NHt0IAKps2IraftvRlDuUTkgIVN6fgn62yAy6nuLwF-MDq0eikL4T98zqHVJHcmbakF1GGKO3RgtRNH2syyJ5yAwc8qU-Jgnfa0AMvpYUUDbN7slMcpKXhgX1oCKGgz/s1600/red+loader.gif

Border Loader

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHVM6HE4UjYUVv2kvEdOWO68pwjF86QB40Blp5CeRWq8NH4O2uWY2uQfpROLL_KKVazpo7VyWQTo1Eov_GOpDT1itArHs5hcfPqVl8oVgkIxLWtCuVvespzsbJac8-um0m8HtTGMNlnQdz/s1600/border+loader.gif

Final Words

So friends this was the infinite scrolling effect which I've shared today. I hope you've liked it and also the loading images. If you're facing problem in implementing this in your blog then feel free to ask in the comments area. Stay in touch with us for more impressive content and please subscribe us to receive email updates. Take a lot of care of you and your family. Happy Blogging!