How to Add JQuery Load More Posts OR Infinite Scrolling to Blogger

♠ Posted by Muhammad Kaif in Blogger Widgets,Infinite Scrolling,Load More Posts at 05:15

Technology is running with rocket's speed and also technology is increasing in the world of web that why we can add as much as new features in the blog be'coz blogging is so much flexible than a website. So, we can add many new and professional features in our blog and same like it "There is an another feature named as LOAD MORE POSTS. Today you will get to know that how can we add that LOAD MORE POSTS or INFINITE POSTS SCROLLING. This is very simple and very easy to install but this effect made by jQuery.

Step 1 : Now let's start adding it...

Step 2: Login to Your Blogger Account.Go to your Blogger Dashboard>Template> Edit HTML> Proceed.

Step 3: Find [by pressing Ctrl + F ] this code in the template:

</head>

Step 4: Paste below code before </head>

<b:if cond='data:blog.pageType == "index"'>
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'/>
<script src='https://googledrive.com/host/0Bxsq9VDr3zyFMjNlYjhNeWlza1U' type='text/javascript'/>
<script type='text/javascript'>
jQuery.ias({
    container : '.blog-posts',
    item: '.post-outer',
    pagination: '#blog-pager',
    next: '#blog-pager-older-link a',
    loader: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2qC9-tXHpeaqMaQWv_iGO7bRtS-kthrsMGQhxGhMhaepYepZg26QDZyTITW_vjcNT7fAo9rR5cmhS1FbuJP1jXAEoHEbqNVjcy6tAIUJS1QNv_5tubcayQaVZ_JowzBcCXxPkxwpOrf77/s1600/wgloading.gif'
});
  </script>
</b:if>

Step 5: You have Done. Finally Save Your Template. 

Load More Post widget simply made  by using the jQuery and this can install very easily but adding the some simple codes, but as we said this widget made by jQuery you it can affect your template some where like javascript could be affect by this jQuery codes but don't worry it will not affect your other important plugins. So go and add this.