Infinite Post Scrolling Effect for Default Blogger Templates

Hey you might be attracted to this post by just looking at the title suggesting you to create some awesome post loading effect you might have seen on bigger sites like facebook and twitter but you can now have this same effect running smoothly right in your blogger blog. Well yes the same effect used by Mashable to load its older post as soon as person scrolls down can now be applied to blogger blogs default blogger template currently but soon it will be available for every custom blogger template too.

View Demo

So if you are not getting what I am talking about then check out the demo, just scroll down and see older posts loading automatically without clicking an button or pagination number.

So now if you got it what I am talking about then lets jump into the tutorial to create this effect in your blogger blog. Now there is one problem due to lengthy steps, this tutorial is divided into 3 parts so check below.

Part 1. Adding Infinite Scrolling Effect to Default Blogger Templates.
Part 2. Adding Infinite Scrolling Effect to Custom Blogger Templates.
Part 3. Adding Infinite Scrolling Effect to other Widgets like Disqus System.

Part 1. Adding Infinite Scrolling Effect to Default Blogger Template

So now currently we will be posting Part 1, so if you are using default blogger template without any pagination customization or anything then this thing will work for you so check below steps.

1. Open Blogger.com > Template > Edit HTML.
2. Now press Ctrl + F and search for </head> tag, now paste below code about it.

   <script src='//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
   <script src='http://www.fieg.nl/wp-content/themes/fieg-b/js/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://www.henley-putnam.edu/Portals/_default/Skins/henley/images/loading.gif'
   });
      
   </script>

3. Now if you already have that jquery line installed remove that and do upload the .js file on your own server, now just click on Save Template.
4. Now refresh your blog and scroll to bottom and see this awesome effect.

So now you might be able to see that awesome infinite loading effect on your blogger blog, well a very big thanks to SimplexDesign for devoting their hard work in creating this awesome script. Well if you need further guidance on this script do check their post. For any problem do comment below.