How do you make an infinite scroll page in Blogger?

Question

I have a blog and would like to make it infinite scroll so you don't have to click through pages and pages of posts. Can anyone help me with the code, its in HTML according to Blogger? Thanks :-)

Have you done any research? I'm sure there are tutorials out there... — Šime Vidas, Oct 13 '12 at 10:08
You'd have to check whether Blogger has a theme with that functionality — Johanna Larsson, Oct 13 '12 at 10:10

score 7 · Accepted Answer · answered Oct 13 '12 at 12:42

How to add infinite scrolling to Blogger blogs

Recently I read an interesting article, How to add infinite scrolling to Blogger blogs. If you are using Blogger's blog, you can follow the instructions and give your blog, an infinite scroll without much hassle.

The code for the widget is available on Google Code. Feel free to copy or adapt the code.

From their website, a few points worth mentioning:

This code uses jQuery library, so don’t forget to include it.

Custom template blogs may have to change the value of postContainerSelector variable in the code.

You have manually added +1 buttons to my blog. Dynamically loaded posts won’t have the +1 buttons initialised; to fix that issue, I had to call gapi.plusone.go() every time new posts are added to the page.

_WidgetManager is a JavaScript object present in Blogger blogs. You can query this object to find some page metadata. This code uses _WidgetManager to determine if the current page is showing a single post. Infinite scrolling is not meaningful when only a single post needs to be displayed.

score 4 · Answer 2 · answered Oct 13 '12 at 10:09

HTML has no way of achieving this, you need JavaScript.

First set up an event listener for the scroll event. When it fires compare the distance scrolled to the height of the document and window.

If that indicates you are near the document, use XMLHttpRequest to download more content, and then the usual DOM suspects to add that content to the page.

score 2 · Answer 3 · answered Oct 13 '12 at 10:18

2

You can achieve this thru JQuery or JScript. HTML can not do this alone.

Here is some example how you can get this.

answered Oct 13 '12 at 10:18

Anusha

175
2
19

score 2 · Answer 4 · answered Oct 13 '12 at 12:36

HTML doesn't specify absolutes in terms of height as it automatically allows for infinite scrolling (you can't say height="100%" for instance. In terms of CMS Blogs like blogger there should be user preferences available to say how many posts you want displayed, in the control panel. Alternatively if you are using a server side technology (e.g. php) with a database you can specify number of items displayed using record set paging.

score 0 · Answer 5 · answered Jun 04 '13 at 15:51

You need to add an event listener using JavaScript, means when a particular element comes to view port an event is fired and it fetches the data from some external resources. The data comes in JSON and you need to extract it and append the info in a DIV.
For this I have made a script which fetches the data from Google Docs using Jquery and the event is fired after you scroll to the bottom most portion. You can check the infinite scroll here

How do you make an infinite scroll page in Blogger?

5 Answers5

How to add infinite scrolling to Blogger blogs

Linked