How to Add Infinite Scrolling to Blogger

How to Add Infinite Scrolling to Blogger

April 07, 2020
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 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 webmsters 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 to rewarning you that this Infinite scrolling not suitable for all Blogger Themes. It's better to use this navigation for the default Bthemes. Ok, lets's begin.

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

<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;//1.bp.blogspot.com/-00HPLuClFMs/VjtDUru56wI/AAAAAAAAiEQ/A3Qta1QFFw4/s1600/preloader%2B%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:

<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:
Blogger pagination

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

<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.

Share by this in:

Author:

Hello, I'm Daniel. For a long time I successfully worked with Blogger templates and for this reason I want to share my experience with each of you.

2 Comments

avatar
Jeibros June 16, 2020 at 10:30 AM

Hi, I used the first code in your post. However, when I applied it to my blog https://testdeideasecundaria.blogspot.com, the new articles after scroll are shown complete. Not just the entry, as the first five articles in the front page. Do you know how to modify that, please?

avatar
Daniel June 17, 2020 at 9:28 AM

Send me your Theme on joberkod@gmail.com I'll check.