infinite-scroll-pattern
Today I’m going to share another trick on how to add infinite post scrolling effect to blogger, originally this script originally created by Simplex Design. if you don’t understand what is infinite post scrolling effect, then go to your Facebook wall and scroll down the page. there you will be seen auto loading (scrolling) older entries.. that effect is called infinite scrolling. it’s work based on jQuery. after adding this script to your blog, when you scroll down page the older post are automatically shown that mean you don’t need to click on older posts…  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.

Demo

How to add Infinite post scrolling effect to blogger?

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

Go to blogger–>Template—>Edit HTML
Tick on “Expand Widget Templates” Check box
Now search for </head> in your tempalte
Copy and paste below code just above/before it.

<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://makingdifferent.github.com/blogger-widgets/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: 'https://www.makingdifferent.com/wp-content/uploads/2013/04/loading.gif'
});
</script>
</b:if>

Remove above red colored line if your blog have already jQuery plugin.
Now save your template and you have done !