How To Add Infinite Scrolling in Blogger

Infinite scrolling refers to loading contents of blog without actually refreshing the blog page. When the user scrolls down the blog older posts are loaded. It is a very good method to decrease your blog bounce rate as the visitor does not have to leave the page. 

View Infinite Scrolling Demo : http://flatui.blogspot.in/

Here are the steps for adding a code in blogger for infinite scrolling:

• Go to your blogger dashboard

• Select your blogger blog

• Click on Layout from Drop Down menu (shown in picture)

• A new Window appear

• Click on Add gadget

• And select HTML/JavaScript

• Next Box of HTML/JavaScript will appear (shown in picture)

   

• Now the box of HTML/JavaScript will appear when you click on the box.

• Now paste the following code to add the Infinite Scrolling Feature on your blog.

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>
<script type='text/javascript'>
(function(a){function h(){g||(g=!0,d?(b.find("a").hide(),b.find("img").show(),a.ajax(d,{dataType:"html"}).done(function(c){var c=a("<div></div>").append(c.replace(j,"")),e=c.find("a.blog-pager-older-link");e?d=e.attr("href"):(d="",b.hide());c=c.find(i).children();a(i).append(c);window._gaq&&window._gaq.push(["_trackPageview",d]);window.gapi&&window.gapi.plusone&&window.gapi.plusone.go&&window.gapi.plusone.go();window.disqus_shortname&&a.getScript("http://"+window.disqus_shortname+".disqus.com/blogger_index.js");
window.FB&&window.FB.XFBML&&window.FB.XFBML.parse&&window.FB.XFBML.parse();b.find("img").hide();b.find("a").show();g=!1})):b.hide())}function k(){var a=Math.max(f.height(),l.height(),document.documentElement.clientHeight),b=f.scrollTop()+f.height();150>a-b&&h()}var d="",b=null,i="div.blog-posts",g=!1,f=a(window),l=a(document),j=/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi;a(document).ready(function(){if("item"!=_WidgetManager._GetAllData().blog.pageType&&(d=a("a.blog-pager-older-link").attr("href"))){var c=
a('<a href="javascript:;">Load more posts</a>');c.click(h);var e=a('<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlkzEjjWCL-sMidgVLjbzbO267XlJw1meYUzcHiy5lssehE3Ih3ZZT9OcMPgwjHd-ING1AA1idxjRDST9BrgaOJXTlNYekHzzow3L0T_b2kyliOyH7dYoSnSk4tODjQVAn4ywbDMIhUavi/s32/ajax-loader.gif" style="display: none;">');f.scroll(k);b=a('<div style="text-align: center; font-size: 150%;"></div>');b.append(c);b.append(e);b.insertBefore(a("#blog-pager"));a("#blog-pager").hide()}})})(jQuery);
 </script>

• Leave the widget title blank.

• Click save

You are done now.