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.
You can use jquery ias, that cool infinite scroll
ReplyDeleteHey julka ... thanks for the suggestion... keep visiting for more stuffs like this..
DeleteThank 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.
ReplyDeleteThis 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?
ReplyDeletei'm in the same situation, any thoughts on how to fix it?
Delete