HackingUniversity - Hacks . Tricks . How-To's

25 February 2013

Infinite Post Scrolling Effect for Custom Blogger Templates

infinite-scroll-patternI posted earlier how you can apply this awesome infinite scrolling effect to your default blogger template's, so as this tutorial was really big so simplex design divided its content into 3 posts so 1 post was posted for only the default templates provided by blogger so if you were using the default then you can follow the previous post mentioned below and if you are using the custom made blogger template then this tutorial is for you.

Well this tutorial is having some more complicated steps then the earlier tutorial but to have some gain you need to have some pain, so check below steps and enjoy this awesome Ajax effect.

Remember To backup your blogger template before following any steps mentioned below, as in any case you mess up your template you can restore it back again.

Part 1. Adding Infinite Scrolling Effect to Default Blogger Templates.
Part 2. Adding Infinite Scrolling Effect to Custom Blogger Templates.
Part 3. Adding Infinite Scrolling Effect to other Widgets like Disqus System.

  1. Open Blogger.com –> Template –> Edit HTML.
  2. Now click on Expand Template Widgets.
  3. Press Ctrl + F and search for <b:includable id='post' var='post'> and you will find some code like below.

    <b:includable id='post' var='post'>
    <-- code here -->
    </b:includable>

  4. Now just add some HTML codes between to make them look like below code.

    <b:includable id='post' var='post'>
    <div class="ias_item">

    <-- code here -->

    </div>
    </b:includable>

  5. Now again search for <b:includable id='main' var='top'> and you will see codes like below.

    <b:includable id='main' var='top'>

    <-- code here -->

    </b:includable>

  6. Now just add another HTML codes between them to make them look like below code.

    <b:includable id='main' var='top'>
    <div class="ias_container">

    <-- code here -->

    </div>
    </b:includable>

  7. Now again search for <b:includable id='nextprev'> and you will see some code like below.

    <b:includable id='nextprev'>

    <-- code here -->

    </b:includable>

  8. Now just add another HTML code between them to make them look like below one.

    <b:includable id='nextprev'>
    <div id="ias_pagination">

    <-- code here -->

    </div>
    </b:includable>

  9. Now right inside this nextprev includable tag you will find another HTML tag some like <a expr:href='data:olderPageUrl'> --------- </a> just add some HTML code between them and make them look like below code.

    <div id="ias_page_next"><a expr:href='data:olderPageUrl'> --------- </a></div>

  10. Now just click on Save Template, if you find any error during save you might have messed up something and you should better check steps again.
  11. Now older steps are remaining that we used in other post check below.
  12. Now search for </head> tag and paste below code above it.

    <script src='//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>

    <script type='text/javascript'>//<![CDATA[
    (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&&h.havePage()){q();pageNum=h.getPage();c.forceScrollTop(function(){if(pageNum>1){l(pageNum);curTreshold=p(true);b("html,body").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>=p()){t(curScrOffset)}}function q(){b(window).unbind("scroll",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("href");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)}},"html")}function l(v){curTreshold=p(true);if(curTreshold>0){t(curTreshold,function(){q();if((j.getCurPageNum(curTreshold)+1)<v){l(v);b("html,body").animate({scrollTop:curTreshold},400,"swing")}else{b("html,body").animate({scrollTop:curTreshold},1000,"swing");s()}})}}function u(){loader=b(".ias_loader");if(loader.size()==0){loader=b("<div class='ias_loader'><img src='"+m.loader+"'/></div>");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&&window.console.log){window.console.log(c)}}b.ias.defaults={container:"#container",item:".item",pagination:"#pagination",next:".next",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("html,body").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>0;i--){if(k>e[i][0]){return i+1}}return 1}this.getCurPageNum=function(k){return c(k)};function f(k){for(i=(e.length-1);i>=0;i--){if(k>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&&history.pushState&&history.replaceState);c=false}this.setPage=function(g,f){this.updateState({page:g},"",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&&stateObj.ias){return stateObj.ias}}else{haveState=(window.location.hash.substring(0,7)=="#/page/");if(haveState){pageNum=parseInt(window.location.hash.replace("#/page/",""));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>0?"#/page/"+g.page:"");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 : '.ias_container',
        item: '.ias_item',
        pagination: '#ias_pagination',
        next: '#ias_page_next a',
        loader: 'http://www.henley-putnam.edu/Portals/_default/Skins/henley/images/loading.gif'
    });
       
    </script>

  13. Now if you already have that blue jquery line installed just remove it.
  14. Now Save Template once again and refresh your blog to see this awesome infinite loading effect. Well that clears the whole tutorial and ends it up.

Well now once again thanks to Simplex Design for creating this awesome tutorial, well you can visit their page for getting more insights on this script.