How to Add Infinite Scrolling to Blogger

What I like about this type of navigation is that it does not force users to make additional clicks, because they don’t like it. Especially when pages load for half an hour. And here you just sit and play with your mouse wheel and browse the content. I think everyone is familiar with the navigation system of Facebook, Pinterest, Reddit, and other social networks.

There are times when you need to stop at a certain place and then continue. So here is the minus, even having saved the page number in the browser bookmarks, returning to it after a while, you can already find completely different content. It drives a little in a stupor and makes the reader nervous. And it’s good if these pages are displayed because some webmasters do the wrong pagination widget without URL markup. The second minus is when the visitor needs to get to the latest publication and for this, he has to play the mouse wheel again, but this time it is not so pleasant. 

Recently, other webmasters began to use endless scrolling even in the posts themselves. Very often I began to notice this, especially on news resources.

How to add Infinite Scroll Navigation in Blogger 

First of all, I must warn you that this Infinite scrolling not suitable for all Blogger Themes. It's better to use this navigation for the default Bthemes. Ok, let's begin. DEMO

1. Go to your Blogger dashboard: Theme - Edit HTML. Find in editor closing tag </body> and insert above him this code:

HTML<script> (function(b){b.ias=function(d){var m=b.extend({},b.ias.defaults,d);var c=new b.ias.util();var j=new b.ias.paging();var h=(m.history?new b.ias.history():false);var f=this;r();function r(){j.onChangePage(function(x,v,w){if(h){h.setPage(x,w)}m.onPageChange.call(this,x,w,v)});s();if(h&amp;&amp;h.havePage()){q();pageNum=h.getPage();c.forceScrollTop(function(){if(pageNum&gt;1){l(pageNum);curTreshold=p(true);b(&quot;html,body&quot;).scrollTop(curTreshold)}else{s()}})}return f}function s(){n();b(window).scroll(g)}function g(){scrTop=b(window).scrollTop();wndHeight=b(window).height();curScrOffset=scrTop+wndHeight;if(curScrOffset&gt;=p()){t(curScrOffset)}}function q(){b(window).unbind(&quot;scroll&quot;,g)}function n(){b(m.pagination).hide()}function p(v){el=b(m.container).find(m.item).last();if(el.size()==0){return 0}treshold=el.offset().top+el.height();if(!v){treshold+=m.tresholdMargin}return treshold}function t(w,v){urlNextPage=b(m.next).attr(&quot;href&quot;);if(!urlNextPage){return q()}j.pushPages(w,urlNextPage);q();o();e(urlNextPage,function(y,x){result=m.onLoadItems.call(this,x);if(result!==false){b(x).hide();curLastItem=b(m.container).find(m.item).last();curLastItem.after(x);b(x).fadeIn()}b(m.pagination).replaceWith(b(m.pagination,y));k();s();if(v){v.call(this)}})}function e(w,x){var v=[];b.get(w,null,function(y){b(m.container,y).find(m.item).each(function(){v.push(this)});if(x){x.call(this,y,v)}},&quot;html&quot;)}function l(v){curTreshold=p(true);if(curTreshold&gt;0){t(curTreshold,function(){q();if((j.getCurPageNum(curTreshold)+1)&lt;v){l(v);b(&quot;html,body&quot;).animate({scrollTop:curTreshold},400,&quot;swing&quot;)}else{b(&quot;html,body&quot;).animate({scrollTop:curTreshold},1000,&quot;swing&quot;);s()}})}}function u(){loader=b(&quot;.ias_loader&quot;);if(loader.size()==0){loader=b(&quot;&lt;div class=&#39;ias_loader&#39;&gt;&lt;img src=&#39;&quot;+m.loader+&quot;&#39;/&gt;&lt;/div&gt;&quot;);loader.hide()}return loader}function o(v){loader=u();el=b(m.container).find(m.item).last();el.after(loader);loader.fadeIn()}function k(){loader=u();loader.remove()}};function a(c){if(window.console&amp;&amp;window.console.log){window.console.log(c)}}b.ias.defaults={container:&quot;#container&quot;,item:&quot;.item&quot;,pagination:&quot;#pagination&quot;,next:&quot;.next&quot;,tresholdMargin:0,history:true,onPageChange:function(){},onLoadItems:function(){},};b.ias.util=function(){var d=false;var f=false;var c=this;e();function e(){b(window).load(function(){d=true})}this.forceScrollTop=function(g){b(&quot;html,body&quot;).scrollTop(0);if(!f){if(!d){setTimeout(function(){c.forceScrollTop(g)},1)}else{g.call();f=true}}}};b.ias.paging=function(){var e=[[0,document.location.toString()]];var h=function(){};var d=1;j();function j(){b(window).scroll(g)}function g(){scrTop=b(window).scrollTop();wndHeight=b(window).height();curScrOffset=scrTop+wndHeight;curPageNum=c(curScrOffset);curPagebreak=f(curScrOffset);if(d!=curPageNum){h.call(this,curPageNum,curPagebreak[0],curPagebreak[1])}d=curPageNum}function c(k){for(i=(e.length-1);i&gt;0;i--){if(k&gt;e[i][0]){return i+1}}return 1}this.getCurPageNum=function(k){return c(k)};function f(k){for(i=(e.length-1);i&gt;=0;i--){if(k&gt;e[i][0]){return e[i]}}return null}this.onChangePage=function(k){h=k};this.pushPages=function(k,l){e.push([k,l])}};b.ias.history=function(){var d=false;var c=false;e();function e(){c=!!(window.history&amp;&amp;history.pushState&amp;&amp;history.replaceState);c=false}this.setPage=function(g,f){this.updateState({page:g},&quot;&quot;,f)};this.havePage=function(){return(this.getState()!=false)};this.getPage=function(){if(this.havePage()){stateObj=this.getState();return stateObj.page}return 1};this.getState=function(){if(c){stateObj=history.state;if(stateObj&amp;&amp;stateObj.ias){return stateObj.ias}}else{haveState=(window.location.hash.substring(0,7)==&quot;#/page/&quot;);if(haveState){pageNum=parseInt(window.location.hash.replace(&quot;#/page/&quot;,&quot;&quot;));return{page:pageNum}}}return false};this.updateState=function(g,h,f){if(d){this.replaceState(g,h,f)}else{this.pushState(g,h,f)}};this.pushState=function(g,h,f){if(c){history.pushState({ias:g},h,f)}else{hash=(g.page&gt;0?&quot;#/page/&quot;+g.page:&quot;&quot;);window.location.hash=hash}d=true};this.replaceState=function(g,h,f){if(c){history.replaceState({ias:g},h,f)}else{this.pushState(g,h,f)}}}})(jQuery); </script> 
<script type='text/javascript'>
jQuery.ias({

container : &#39;.blog-posts&#39;,

item: &#39;.post-outer&#39;,

pagination: &#39;#blog-pager&#39;,

next: &#39;#blog-pager-older-link a&#39;,

loader: &#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs6NvO-Dgd8poM3-8oHJA6E3dMpHebGIiXW45nlh1e4v4-p9IPfwqY7jxYWP9l5ZHri8u6uQ_XpfJuynvxzid8i7CLrtRV58WcNpJup8GN1D3EiigDSAK8ldjn2cr-Cl_FsI1jyS0LSKM/s1600/preloader+%25284%2529.gif&#39;

});
</script>

Save settings and check your home page.

2. If navigation not work, try to ad in to your Theme above the closing tag </head> the following jquery library:

JS<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'/>

Nice. Now save settings and check again.

3. If you're using new Blogger themes such as Notable, Emporio, Contempo or Soho you need to find postpagination code:

And instead of the highlighted code in the screenshot, add the following code:

HTML<b:if cond='data:blog.pageType != &quot;item&quot;'>
 <div class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'>&amp;larr;&amp;nbsp;<data:newerPageTitle/></a>
      </span>
    </b:if>

    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/>&amp;nbsp;&amp;rarr;</a>
      </span>
    </b:if>

    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

    <b:if cond='data:mobileLinkUrl'>
      <div class='blog-mobile-link'>
        <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
      </div>
    </b:if>
  </div>
 </b:if>

Save settings and enjoy the new navigation of your blog

Video instruction

If you have some qustions use comment form below.