Implementing Simple Infinite Scroll Feature on Blogger

Implementing Simple Infinite Scroll Feature on Blogger

Content Table

1. Configuration 

This feature is a real example of implementing this code snippet which is then applied to create AJAX page navigation without jQuery as in the previous example .

Infinite scroll is a web design technique that prevents the browser's scroll bar from scrolling to the bottom of the page, making the page grow with additional content instead.

This plugin requires you to specify four elements as JavaScript targets. Posts, post containers, page navigation containers and next page navigation links. For Blogger , the most commonly used target elements are as follows:

• .blog-posts
• .date-outer
• .blog-pager
• .blog-pager-older-link

You can customize it later based on the HTML markup in your template.

This plugin was originally a plugin for CMS , but actually it can still work on other platforms such as Blogger , with a little adjustment of course.

To implement it on Blogger , copy the code below then place it above </body>:

<b:if cond='data:blog.pageType in [&quot;index&quot;,&quot;archive&quot;]'>
<script src='https://rawcdn.githack.com/IRFANSHAHMARWAT/Blogger-store/b24dd3bfc59aec45605d4be730dd0d9661a65f1d/infinite-scroll.min.js'></script>
<script>
//<![CDATA[
/*! Simple AJAX infinite scroll by Blogger Store*/
var infinite_scroll = new InfiniteScroll({
    type: 2,
    target: {
        posts: '.blog-posts',
        post: '.date-outer',
        anchors: '.blog-pager',
        anchor: '.blog-pager-older-link'
    },
    text: {
        load: '<a class="js-load" href="javascript:;">Load More</a>',
        loading: '<span class="js-loading" style="cursor:wait;">Load\u2026</span>',
        loaded: '<span class="js-loaded">Loaded.</span>',
        error: '<a class="js-error" href="javascript:;">Error.</a>'
    }
});
//]]>
</script>
</b:if>

Save changes.

Configuration 

Data	Information
type	Option 0means user need to click on Reload button to load previous posts. The option 1means the user only needs to scroll the browser all the way to the end of the page to load the previous posts. The option 2means the user needs to click on the Reload button to load the previous posts, after that the user just needs to scroll the browser to the end of the page to load the previous posts.

Thanks for reading: Implementing Simple Infinite Scroll Feature on Blogger, Sorry, my English is bad:)