How to Install Infinite Scroll in Blogger

If you want to install infinite scroll in blogger blog then you are on the right path in this post we will see how we can install infinite scroll in blogger that's not too much difficult we will follow some simple steps to do that.

What is infinite scroll?

If you are not familiar with the terms infinite scroll then this is the answer for you. Infinite scroll basically is a technique by which you can automatically load new posts on your main page of your website without clicking the pagination button. By default on every blog pagination's are shown when user click on that pagination, mostly used as button with text older posts or previous posts then the next posts are loaded. But by using infinite scroll technique your posts automatically loads up when user Scrolls down.

In today's modern era everyone wants ease and it's the best way to give your users a little bit of ease when they are visiting your website they don't have to click a button to load previous posts they simply have to scroll down and older posts automatically loads up.

I searched for this infinite scroll technique to install it on blogger I haven't founded the exact answer then after some research I founded a CDN link of infinite scroll plugin which I used for this.

Now just without wasting our time let's see how we can install this infinite scroll in blogger blog you can also follow the same steps to install this infinite scroll in WordPress sites.

Follow these steps to install infinite scroll in blogger:

1. Go to Blogger Dashboard
2. Go to Theme/Template Section
3. Click Edit HTML
4. Now Search for </head> or </body>

To search anything in blogger template section press Ctrl+F and then type term to search and press enter.

5. Now copy the code provided below and paste it just above that tag which we have founded in step 4.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-infinitescroll/3.0.5/infinite-scroll.pkgd.min.js"><-e30/script>
<script>
//<![CDATA[
// init Infinite Scroll
$('.blog-posts').infiniteScroll({
  path: 'a.blog-pager-older-link',
  append: 'article',
  status: '.scroller-status',
  hideNav: '.blog-pager',
});
//]]>
</script>

6. Save Theme/Template

In the above code I have used defaults selectors which are present in every e blogger template but if you are using your own costume blogger template then you will face some kind of issues you don't worry you can comment me that issues in the comment section I will resolve all that issues.

Customizations:

In the above code provided you have to change highlighted text (article) with the class of that element which is your post on your home page or you can say you have to replace it with the class of elements which are the children's of element with class blog-posts.

For example in my case i am having this format.

<div class="blog-posts">
<article>......</article>
<article>......</article>
.....
.....
.....
<article>......</article>
<article>......</article>
</div>

You can see that my posts are shown in article tag or element that why i used article as a selector.

Conclusion:

That's it in today's article in this article I have explained how to install infinite scroll in blogger you simply have to follow all the steps provided above and do as it is said and if you still have any difficulty or any problem or any issues you can comment me below I will try to solve them as soon as possible.

I am here to help you. You can ask me any kind of help i will do if i can. Now go and visit your website now and scroll down if this script is successfully implemented then and you will see auto-loading of posts when you scroll down on your main page of your website.

Good Luck!

source:softwebtuts.com