Announcement:

  Hello, We Changed Our Cloth, How It Is Looking? Leave Your Feedback At Our Page.

Tuesday, August 27, 2013

How To Add Unlimited/Infinite Blog Post Scrolling In Blogger/Blogspot?

This Article Was Live On: Tuesday, August 27, 2013 And Till Now Have8 comments.
How To Add Unlimited/Infinite Blog Post Scrolling In Blogger/Blogspot?

After releasing many code and hack here, here we are another one and this time we are going to convert your blog to scroll unlimited page with just scrolling your page down. When you or your visitor will browse your blog and after seeing your first page, you don't have to click NextPage button because after reaching down, it will automatically load next page posts in your first page and after scrolling more down, it will load next page post automatically and so on...

Through this code you will nott too tired to click on that “Next” button just to see the rest of the posts? Many of other also posted this and generally called ‘infinite scrolling’ in web design. Don't worry about SEO because it will not eat up your blog loading time. Your blogger will record pageviews also. This will also help you to increase your visitor time on main page that is so important in new whitehat SEO.

Now In this tutorial we have a new way for posts to be viewed on your blogs homepage, namely infinite scroll.Infinite scroll has been a popular trend in web design for some time and now you can have it on your blogger blogs.On Blogger we have on the homepage by default 'Previous' and 'Next' buttons to load a new page of posts.Now this tutorial takes another step with adding Infinite Scroll to Blogger blogs.

Many of the other have this code but that code are intrepting with Auto Image Thumbnail & ReadMore Link For Blogger Post. So don't worry about it.

You can check out the demo on our homepage because we are using it.In the demo we have the homepage set to show three page posts, when you scroll to the end of the posts you will see the link to "Load More Posts".If you stay scrolling more posts will load automatically. So now it's time to add this but don't forget to check out the features list below before getting the code.

Features:

1.) JavaScript And JQuery Coded.
2.) Jquery 1.9.1 Added.
3.) No External File Added To Keep Your Load Time Ok.
4.) Jquery Is Hosted On Official CDN Network So Don't Worry About It.
5.) Simple And Clean Code.
6.) Will Scroll Your Posts To Infinite Automatically.
7.) Your Pageviews Will Be Count In Blogger.
8.) Will Stop Auto Scrolling After Reaching Your Desired Page.
9.) A Button Will Appear To Load More Post After Stop Auto Scrolling.
10.) Auto Scrolling Stop Is Added To Increase Your Click Count And To Show Your Footer To Your Visitor.
11.) Fully Customizable CSS.
12.) You Can Change Text And Image Of Loading.
13.) More Features Are Also Added In This Script.
14.) Will Work On Auto ReadMore And Thumbnail Code Too.
15.) Blogger Dynamic Template Style Adopted.
16.) SEO Optimized.
17.) Quick To Load And Easy To Install.
18.) Will Not Effect On Your Page Loading Text/Image.
19.) Will Not Work On Post Pages. Will Show Unlimited Posts Only HomePage, LabelPage, SearchPage.
20.) Automatically Hide Next/Prev Links In These Pages.

How To Add In Blogspot?

1.) Go To Your www.blogger.com
2.) Open Your Desire "Blog".
3.) Go To "Template".
4.) Click "Edit HTML".
5.) Now Click Within Code Box.
6.) Press [CTRL+F] To Search </body> Code.
7.) Now Copy The Below Code And Paste It Before </body> Code..
8.) Click "Save Template" And Done.

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'/>
<script type='text/javascript'>
//<![CDATA[
(function($){'use strict';Date.now=Date.now||function(){return+new Date()};$.ias=function(g){var h=$.extend({},$.ias.defaults,g);var i=new $.ias.util();var j=new $.ias.paging(h.scrollContainer);var k=(h.history?new $.ias.history():false);var l=this;function init(){var d;j.onChangePage(function(a,b,c){if(k){k.setPage(a,c)}h.onPageChange.call(this,a,c,b)});reset();if(k&&k.havePage()){stop_scroll();d=k.getPage();i.forceScrollTop(function(){var a;if(d>1){paginateToPage(d);a=get_scroll_threshold(true);$('html, body').scrollTop(a)}else{reset()}})}return l}init();function reset(){hide_pagination();h.scrollContainer.scroll(scroll_handler)}function scroll_handler(){var a,scrThreshold;a=i.getCurrentScrollOffset(h.scrollContainer);scrThreshold=get_scroll_threshold();if(a>=scrThreshold){if(get_current_page()>=h.triggerPageThreshold){stop_scroll();show_trigger(function(){paginate(a)})}else{paginate(a)}}}function stop_scroll(){h.scrollContainer.unbind('scroll',scroll_handler)}function hide_pagination(){$(h.pagination).hide()}function get_scroll_threshold(a){var b,threshold;b=$(h.container).find(h.item).last();if(b.size()===0){return 0}threshold=b.offset().top+b.height();if(!a){threshold+=h.thresholdMargin}return threshold}function paginate(d,e){var f;f=$(h.next).attr('href');if(!f){if(h.noneleft){$(h.container).find(h.item).last().after(h.noneleft)}return stop_scroll()}if(h.beforePageChange&&$.isFunction(h.beforePageChange)){if(h.beforePageChange(d,f)===false){return}}j.pushPages(d,f);stop_scroll();show_loader();loadItems(f,function(a,b){var c=h.onLoadItems.call(this,b),curLastItem;if(c!==false){$(b).hide();curLastItem=$(h.container).find(h.item).last();curLastItem.after(b);$(b).fadeIn()}f=$(h.next,a).attr('href');$(h.pagination).replaceWith($(h.pagination,a));remove_loader();hide_pagination();if(f){reset()}else{stop_scroll()}h.onRenderComplete.call(this,b);if(e){e.call(this)}})}function loadItems(b,c,d){var e=[],container,startTime=Date.now(),diffTime,self;d=d||h.loaderDelay;$.get(b,null,function(a){container=$(h.container,a).eq(0);if(0===container.length){container=$(a).filter(h.container).eq(0)}if(container){container.find(h.item).each(function(){e.push(this)})}if(c){self=this;diffTime=Date.now()-startTime;if(diffTime<d){setTimeout(function(){c.call(self,a,e)},d-diffTime)}else{c.call(self,a,e)}}},'html')}function paginateToPage(a){var b=get_scroll_threshold(true);if(b>0){paginate(b,function(){stop_scroll();if((j.getCurPageNum(b)+1)<a){paginateToPage(a);$('html,body').animate({'scrollTop':b},400,'swing')}else{$('html,body').animate({'scrollTop':b},1000,'swing');reset()}})}}function get_current_page(){var a=i.getCurrentScrollOffset(h.scrollContainer);return j.getCurPageNum(a)}function get_loader(){var a=$('.ias_loader');if(a.size()===0){a=$('<div class="ias_loader">'+h.loader+'</div>');a.hide()}return a}function show_loader(){var a=get_loader(),el;if(h.customLoaderProc!==false){h.customLoaderProc(a)}else{el=$(h.container).find(h.item).last();el.after(a);a.fadeIn()}}function remove_loader(){var a=get_loader();a.remove()}function get_trigger(a){var b=$('.ias_trigger');if(b.size()===0){b=$('<center><div class="ias_trigger"><a href="#">'+h.trigger+'</a></div></center>');b.hide()}$('a',b).off('click').on('click',function(){remove_trigger();a.call();return false});return b}function show_trigger(a){var b=get_trigger(a),el;el=$(h.container).find(h.item).last();el.after(b);b.fadeIn()}function remove_trigger(){var a=get_trigger();a.remove()}};$.ias.defaults={container:'.blog-posts',scrollContainer:$(window),item:'.post-outer',pagination:'#blog-pager',next:'#blog-pager-older-link a',loader:'<center><img src="http://www.mountainchalets.com/layout/progress-bar.gif"/></center>',loaderDelay:2000,triggerPageThreshold:2,trigger:'Load More Posts',thresholdMargin:-500,history:true,onPageChange:function(){},beforePageChange:function(){},onLoadItems:function(){},onRenderComplete:function(){ FB.XFBML.parse(); gapi.plusone.go(); twttr.widgets.load(); _gaq.push(['_trackPageview']); },customLoaderProc:false};$.ias.util=function(){var c=false;var d=false;var e=this;function init(){$(window).load(function(){c=true})}init();this.forceScrollTop=function(a){$('html,body').scrollTop(0);if(!d){if(!c){setTimeout(function(){e.forceScrollTop(a)},1)}else{a.call();d=true}}};this.getCurrentScrollOffset=function(a){var b,wndHeight;if(a.get(0)===window){b=a.scrollTop()}else{b=a.offset().top}wndHeight=a.height();return b+wndHeight}};$.ias.paging=function(){var c=[[0,document.location.toString()]];var d=function(){};var e=1;var f=new $.ias.util();function init(){$(window).scroll(scroll_handler)}init();function scroll_handler(){var a,curPageNum,curPagebreak,scrOffset,urlPage;a=f.getCurrentScrollOffset($(window));curPageNum=getCurPageNum(a);curPagebreak=getCurPagebreak(a);if(e!==curPageNum){scrOffset=curPagebreak[0];urlPage=curPagebreak[1];d.call({},curPageNum,scrOffset,urlPage)}e=curPageNum}function getCurPageNum(a){for(var i=(c.length-1);i>0;i--){if(a>c[i][0]){return i+1}}return 1}this.getCurPageNum=function(a){a=a||f.getCurrentScrollOffset($(window));return getCurPageNum(a)};function getCurPagebreak(a){for(var i=(c.length-1);i>=0;i--){if(a>c[i][0]){return c[i]}}return null}this.onChangePage=function(a){d=a};this.pushPages=function(a,b){c.push([a,b])}};$.ias.history=function(){var e=false;var f=false;function init(){f=!!(window.history&&history.pushState&&history.replaceState);f=false}init();this.setPage=function(a,b){this.updateState({page:a},'',b)};this.havePage=function(){return(this.getState()!==false)};this.getPage=function(){var a;if(this.havePage()){a=this.getState();return a.page}return 1};this.getState=function(){var a,stateObj,pageNum;if(f){stateObj=history.state;if(stateObj&&stateObj.ias){return stateObj.ias}}else{a=(window.location.hash.substring(0,7)==='#/page/');if(a){pageNum=parseInt(window.location.hash.replace('#/page/',''),10);return{page:pageNum}}}return false};this.updateState=function(a,b,c){if(e){this.replaceState(a,b,c)}else{this.pushState(a,b,c)}};this.pushState=function(a,b,c){var d;if(f){history.pushState({ias:a},b,c)}else{d=(a.page>0?'#/page/'+a.page:'');window.location.hash=d}e=true};this.replaceState=function(a,b,c){if(f){history.replaceState({ias:a},b,c)}else{this.pushState(a,b,c)}}}})(jQuery);
//]]>
</script>
<script>jQuery.ias();</script>
<style>
.ias_trigger {margin-bottom: 25px;margin-top: 25px;}
.ias_trigger a{padding: 10px;color: #fff;background: #00c4ff;font-weight: bold;text-transform: uppercase;}
</style>
</b:if>

Customization:

1.) Remove JQuery 1.9.1 If You Already Have It.
2.) Change Blue Link With Your Desired Image Link That Will Be Shown On Loading Next Page.
3.) Change Red Text With Your Desired Text That Will Be Appear In Link After Reaching Your Targeted Post To Click And Load More Posts.
4.) Change Purple No To Your Desire Count To Stop Autoloading After Loading These Pages.
5.) Change Brown No With Your Desired Count To Increase/Decrease In Delay While Loading A New Page.
6.) Change CSS As You Want.
7.) Save And Done.

Last Words:

That's all we have. If you have any problem with this code in your blogger template then feel free to contact us with full explanation of your problem. We will reply you as time allow to us. Don't forget to share this with your friends so they can also take benefit from it and leave your precious feedback in our comment form below. Happy blogging, See you in next article...

You Like It, Please Share This Article Using...




Don't Forget To Read This Also...



8 comments :

  1. It's been first started using by famous TechBlog Mashable I guess

    ReplyDelete
    Replies
    1. May Be But It's 100% Confirm That It's First Used On WordPress Platform And Then Blogger Dynamic Template Adopted It And Now, It's Available For All Like Blogger, Drupal, Tumblr And WordPress...

      Delete
  2. thank you for posting, always searching for it.

    ReplyDelete
    Replies
    1. Welcome Here And Thanks For Liking It, Be With Us To Get More Codes Like This...

      Delete
  3. Hi, I tried to use the script on my blog, it works on most pages, but not on the homepage. Can you help me fix the problem?

    ReplyDelete
    Replies
    1. Can I See Your Blog URL Where Its Happening?

      Delete
  4. Replies
    1. Welcome Here And Thanks For Liking It. Be With Us To Get More Like This.

      Delete

Speak Your Mind:



Please Read The Rules Before Commenting:-

1.) Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.
2.) Make sure to click the "Notify me" link below the comment to be notified of follow up comments and replies.
3.) Please "Do Not Spam".
4.) Please "Do Not Add Links" to the body of your comment as they will not be published. If the quires contain link then never add HTML tag to it.
5.) Only "English" comments shall be approved and answered.
6.) If you have a problem check first the comments, maybe you will find the solution there.
7.) Your comments must contain 100+ characters to remain accepted.
8.) Never Use Keywords In The Name Section Otherwise Your Comment Will Be Deleted.
9.) All comment will be deleted if it will not fulfil the requirements.