How to Add Pagination Feature to Custom BloggerCMS Layouts

Open up post.mustache file in editor of your choice and below the post body, enter pagination links something like:

<a class="prevpost">Prev Post</a>
<a class="nextpost">Next Post</a>

Notice that here we are using prevpost and nextpost classes for the prev and next links, we will utilize these in javascript below.

Below your footer partial, enter this javascript code:

<!-- for pagination -->
<script>
    $(function () {

        ///////////////////////////////////////////////////
        // class/id/selector of prev link
        var $prevPostSelector = $('.prevpost');
        var $nextPostSelector = $('.nextpost');
        ///////////////////////////////////////////////////

        var pageArray = document.location.href.split('/');
        var currentPageSlug = pageArray[pageArray.length - 1];

        $.ajax({
            url: __blogURL + "/data/blog.json",
            type: "GET",
            dataType: "json",
            success: function (data) {
                if (data.posts !== undefined && data.posts !== null) {
                    $.each(data.posts, function (i, post) {
                        if (post.slug + '.html' === currentPageSlug) {

                            var prevPost = data.posts[i - 1];
                            var nextPost = data.posts[i + 1];

                            if (prevPost === undefined || prevPost === null) {
                                // hide previous link if it is first post
                                $prevPostSelector.hide();
                            }
                            else {
                                $prevPostSelector.attr('href', __blogURL + '/post/' + prevPost.slug + '.html');
                            }

                            if (nextPost === undefined || nextPost === null) {
                                // hide previous link if it is last post
                                $nextPostSelector.hide();
                            }
                            else {
                                $nextPostSelector.attr('href', __blogURL + '/post/' + nextPost.slug + '.html');
                            }

                            return false; // break out of each
                        }
                    });
                }
            },
            error: function (e) {
                $prevPostSelector.hide();
                $nextPostSelector.hide();
            }
        });

    });
</script>

From above code, we only need to modify these lines:

///////////////////////////////////////////////////
// class/id/selector of prev link
var $prevPostSelector = $('.prevpost');
var $nextPostSelector = $('.nextpost');
///////////////////////////////////////////////////

Here you need to specify selectors for previous and next links. Notice that we have already matched them with class value of links given at the top. If you use some other class or id for your next/prev links, you will need to match their selectors in above two variables and that's all.

For technical part of it, we construct prev and next links dynamically by finding out current page url and then getting all posts data from public/data/blog.json file through ajax request. We compare current page url with different post slugs from the data file and once matched, we construct next and prev links and exit out of each using return false instantly. You can also check out post.mustache file in default layout to see how it's done.

Note: You must include jQuery file before above pagination code.