You almost found it everytime when you search using google. But these days, many websites prefer using infinite scroll. Twitter, facebook, youtube, and many more already use it. And the new dynamic Blogger template also has already implemented this technique. The basic functionality of infinite scroll is when user scroll through content and more content will be loaded automatically using AJAX.
But can infinite scroll implemented in static Blogger template? Yes it can, by using this jQuery plugin called infinite-ajax-scroll created by Webcreate. It's very cool, because its options can adapt with blogspot layout, and worked really well with blogspot. The plugin also use History API to camouflage the url and handling the back button.
Here's the sample demo
DEMO
So if you want to implement it, check step by step below:
1. Placing the script
Login to your Blogger account and choose the blog you want to add the code.
In the Blogger Admin Panel/Dashboard, go to Template section in the left panel → click Edit HTML (backup your template before if necessary), press Ctrl+F and search for
</body> in the search box. After getting the result, immediately place this code just above the </body> tag.2. The Options
Different blogspot sites may had different DOM structure, in this case study, we're using the classic simple template for the demo, so you might to have change the options in the plugins depend on your blog layout to make it worked. This maybe not cover all options provided by the plugins. I suggest you read the details at their github page.
| Option | Description |
|---|---|
container |
jQuery selector of the element that the older blog posts will be appended to, in previous example we use '.blog-posts' choice, it means every older blog posts automatically will be placed at the end inside element contain class name of 'blog-post'. see Image. |
item | jQuery selector of element that contain each of the blog post, we use '.date-outer' choice, means we assumed that every each post are wrapped inside element with class name 'date-outer'. see Image. |
pagination |
jQuery selector of element that contain the pagination/pager links like older post, home, and newer post. This element will be hidden by the plugin. We use '#blog-pager' choice, means the element that have id 'blog-pager' will be treated as the pagination/pager links and will be hidden from the user views. see Image. |
next |
jQuery selector of element that contain anchor link to older blog post (must be the <a href> tag). We use '#blog-pager-older-link a' choice, means the href attribute of anchor link that have parent of element with id 'blog-pager-older-link' will be used as the url address of the older blog post. see Image. |
loader |
the animation image that will be displayed when loading the item (mainly gif). |
triggerPageThreshold |
very useful option when your blog have many posts. The basic of infinite scroll mechanism is more content will load automatically when user scroll to the bottom. And sometimes prevent user for viewing the footer of the page because it's being intercepted first by the infinite scroll mechanism. If you have a lot of posts, this could be a problem for user because it was like seeing the endless scroll. This option prevent that. If you specified this option with number greater than 0, example n number. It will only load the older post automatically within n times, afterward it will provide a link whether to load any more post or not. |
thresholdMargin |
a threshold when the plugin must start loading new items when user scroll to the latest item element. Example: -100, the plugin start loading 100 pixel before the last item scrolled into view. |
onRenderComplete |
a callback/event handler which called each time the older post have been inserted into container selector. The option in example above means every time the older post have been inserted into view, it will reinitialization facebook, twitter, and google+ button, and also adding new track of older posts to google analytics. |
