Add Load More Posts or Infinite Scrolling to Blogger

You may have seen the infinite scroll implemented by Facebook, Twitter or Google+. Instead of showing links to old/new posts, we can load posts dynamically when you click the "Load more posts" button or scroll down the page. This tutorial shows you how to implement an Ajax-based loading script that adds a "Load More Posts" or "Infinite Scroll" feature to Blogger so that visitors can easily navigate without reloading the page.

How it works?

- You have the option to add a "Load more posts" button or automatically load old posts when a visitor loads the page.
– Once enabled, the extra posts/infinite scroll feature will apply to all blogger posts on the index page (home page, archive, account page). Cannot be added to private messages.

Education

Check out the demo below to see it live. As you scroll down the page, you will see a Load More Posts button. Once you click on it, the next 3 posts will be loaded below to appear.

Education

Load more posts or add infinite scroll to Blogger.

1. Log in to your Blogger account and click on the blog you want to add.
2. Open the theme and click the Edit HTML button to open the template editor > Click anywhere in the code area and press CTRL + F (or Command + F) to open the search box.

3. Enter the tags below in the search field and press ENTER to find them:

4. Slightly higher account, add the script below.

A. If you want to load posts with the "Load more posts" button like a demo blog, add this script.

b. If you want to add keyless infinite scroll use this instead:

Notes. This code uses the jQuery library, so if you already have jQuery on your page, remove the highlighted red line above.

5. Click the Save Template button and check the More Posts/Infinite Scroll box on your Blogger Blog.

Conclusion

That's all! This is how we can easily add more posts loading/infinite scroll feature to Blogger. From now on, our visitors can stay on the same page and view unlimited posts on the go!