Advertise Here


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 :

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=''></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("");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+"");
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="",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("").attr("href"))){var c=
a('<a href="javascript:;">Load more posts</a>');;var e=a('<img src="" 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);

  • Leave the widget title blank.
  • Click save
You are done now.

Post a Comment Blogger Disqus

  1. You can use jquery ias, that cool infinite scroll

    1. Hey julka ... thanks for the suggestion... keep visiting for more stuffs like this.. :)

  2. Thank you very much for this! I had been searching for a simple way to add infinite scrolling for a while, but wasn't able to do it until I found this code. :)

  3. This is great but it breaks blogger's built in lightbox gallery on any image that's been added dynamically. Any idea how to re-initialize lightbox for the newly loaded images?

    1. i'm in the same situation, any thoughts on how to fix it?


Get Free Updates...!!!