WordPress style infinite post loading script for Blogger

Today I will explain you how to create WordPress kind infinite post loading (scrolling) effect on Blogger. This script is originally created by Simplex Design. Infinite scrolling for blog posts in very charming effect with lite loading effect. I'd first saw this effect on my WordPress.com blog from that time I am desiring this effect for Blogger. If you are not able to understand this effect then you should go to you Facebook wall then scroll down page. There you'll see the auto loading of old wall entries, this effect is called infinite scrolling until it gets your very first post. In my article I am just changing Blogger pageType tag to make your blog faster and responsive against this script. The main benefit using my version will be you'll able to load infinite scrolling on home page, archive page and search page while this script will not load on your item page and static pages i.e. blog posts and pages. This means your blog will be more responsive and fast.

If you want to see the live example of this infinite scrolling script on Blogger. You can click the demo button below.

Demo

Note: This script will work only on default Blogger templates or those are not highly customized template.

Installing infinite post loading script for Blogger

1. Go to Blogger Dashboard › Select Blog › Template tab › Edit HTML
2. Now search for </head> in your template
3. And paste following code on just above </head>

<b:if cond='data:blog.pageType == "index"'>
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
<script src='http://techprevue.googlecode.com/files/jquery.ias.min.js' type='text/javascript'></script>
<script type='text/javascript'>
jQuery.ias({
    container : '.blog-posts',
    item: '.post-outer',
    pagination: '#blog-pager',
    next: '#blog-pager-older-link a',
    loader: 'http://techprevue.googlecode.com/files/preloader.gif'
});
</script>
</b:if>

4. If you're using latest jQuery script you can remove the jQuery code from above code highlighted in red. You should download and upload these files in your own Dropbox or Google Project or Code which are highlighted in green and orange color.
5. Now Save this script (code) in your template
6. Go to your blog's home page and see the script in action. If script does not work please load the page else leave a comment.

Other Essentials ›
› Learn How to Edit blogger template
› Learn How to host files on Dropbox
› Learn How to host files on Google Project or Code