How to Add Simple Numeric Page Navigation Feature for Blogger

Unfortunately, Blogger platform has no support for Numeric Page Navigator by default, and that might be confusing for the regular reader. Probably, because it's something that they are unfamiliar with, and not the mention how simple it can make your blog to navigate.


Of course, everyone knows that Blogger is extremely flexible and customizable blogging platform. Today, I am going to show you how to add basic page navigation with numbers featuring Font Awesome arrow icons as Next and Previous buttons.

Numeric Pager Navigation Features

This is our implementation of this numbered pages blogger modification, and we focused mostly on making it as simple and functional as possible, here are the features:
  • You can reach first and last page from anywhere.
  • The list of pages wont exceed more than three at a time.
  • Font Awesome arrow icons support.
  • Implemented with minimal JavaScript and CSS.
  • Works on blog index pages and labels as well.
  • Works very well with responsive templates.

That's all, you can post your suggestions in the comment section below, if you wish to see further improvements and features to this modification.

How to Add Numbered Pager to Blogger

From your Blogger Dashboard go directly to Template → Edit HTML then follow the steps accordingly.

Ensure Font Awesome Support

You have to make sure that your template support Font Awesome icons by adding the following code (ABOVE) your </head> ending tag.
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>
If your template already has this code, then just skip this and proceed to the next step.

Add JavaScript/CSS for Numeric Navigation

Look for </body> ending tag and put the following code (ABOVE) it:
<script type='text/javascript'>
//<![CDATA[
    var perPage = 5;
    var numPages = 3;
    var prevText = '<i aria-hidden="true" class="fa fa-angle-double-left"></i>';
    var nextText = '<i aria-hidden="true" class="fa fa-angle-double-right"></i>';
    var urlactivepage = location.href;
    var home_page = "/";
    var noPage;
    var currentPage;
    var currentPageNo;
    var postLabel;
    pagecurrentg();

    function looppagecurrentg(pageInfo) {
        var html = '';
        pageNumber = parseInt(numPages / 2);
        if (pageNumber == numPages - pageNumber) {
            numPages = pageNumber * 2 + 1
        }
        pageStart = currentPageNo - pageNumber;
        if (pageStart < 1) pageStart = 1;
        lastPageNo = parseInt(pageInfo / perPage) + 1;
        if (lastPageNo - 1 == pageInfo / perPage) lastPageNo = lastPageNo - 1;
        pageEnd = pageStart + numPages - 1;
        if (pageEnd > lastPageNo) pageEnd = lastPageNo;
        var prevNumber = parseInt(currentPageNo) - 1;
        if (currentPageNo > 1) {
            if (currentPage == "page" && currentPageNo == 2) {
                html += '<span class="showpage prevpage"><a href="' + home_page + '">' + prevText + '</a></span>'
            } else if (currentPage == "label" && currentPageNo == 2) {
                html += '<span class="displaypageNum prevpage"><a href="/search/label/' + postLabel + '?&max-results=' + perPage + '">' + prevText + '</a></span>'
            }
        }
        if (currentPageNo > 2) {
            if (currentPage == "page") {
                html += '<span class="displaypageNum prevpage"><a href="#" onclick="redirectpage(' + prevNumber + ');return false">' + prevText + '</a></span>'
            } else {
                html += '<span class="displaypageNum prevpage"><a href="#" onclick="redirectlabel(' + prevNumber + ');return false">' + prevText + '</a></span>'
            }
        }
        if (pageStart > 1) {
            if (currentPage == "page") {
                html += '<span class="displaypageNum"><a href="' + home_page + '">1</a></span>'
            } else {
                html += '<span class="displaypageNum"><a href="/search/label/' + postLabel + '?&max-results=' + perPage + '">1</a></span>'
            }
        }
        if (pageStart > 2) {
            html += ' ... '
        }
        for (var jj = pageStart; jj <= pageEnd; jj++) {
            if (currentPageNo == jj) {
                html += '<span class="pagecurrent">' + jj + '</span>'
            } else if (jj == 1) {
                if (currentPage == "page") {
                    html += '<span class="displaypageNum"><a href="' + home_page + '">1</a></span>'
                } else {
                    html += '<span class="displaypageNum"><a href="/search/label/' + postLabel + '?&max-results=' + perPage + '">1</a></span>'
                }
            } else {
                if (currentPage == "page") {
                    html += '<span class="displaypageNum"><a href="#" onclick="redirectpage(' + jj + ');return false">' + jj + '</a></span>'
                } else {
                    html += '<span class="displaypageNum"><a href="#" onclick="redirectlabel(' + jj + ');return false">' + jj + '</a></span>'
                }
            }
        }
        if (pageEnd < lastPageNo - 1) {
            html += '...'
        }
        if (pageEnd < lastPageNo) {
            if (currentPage == "page") {
                html += '<span class="displaypageNum"><a href="#" onclick="redirectpage(' + lastPageNo + ');return false">' + lastPageNo + '</a></span>'
            } else {
                html += '<span class="displaypageNum"><a href="#" onclick="redirectlabel(' + lastPageNo + ');return false">' + lastPageNo + '</a></span>'
            }
        }
        var nextnumber = parseInt(currentPageNo) + 1;
        if (currentPageNo < lastPageNo) {
            if (currentPage == "page") {
                html += '<span class="displaypageNum nextpage"><a href="#" onclick="redirectpage(' + nextnumber + ');return false">' + nextText + '</a></span>'
            } else {
                html += '<span class="displaypageNum nextpage"><a href="#" onclick="redirectlabel(' + nextnumber + ');return false">' + nextText + '</a></span>'
            }
        }
        var pageArea = document.getElementsByName("pageArea");
        var blogPager = document.getElementById("blog-pager");
        for (var p = 0; p < pageArea.length; p++) {
            pageArea[p].innerHTML = html
        }
        if (pageArea && pageArea.length > 0) {
            html = ''
        }
        if (blogPager) {
            blogPager.innerHTML = html
        }
    }

    function totalcountdata(root) {
        var feed = root.feed;
        var totaldata = parseInt(feed.openSearch$totalResults.$t, 10);
        looppagecurrentg(totaldata)
    }

    function pagecurrentg() {
        var thisUrl = urlactivepage;
        if (thisUrl.indexOf("/search/label/") != -1) {
            if (thisUrl.indexOf("?updated-max") != -1) {
                postLabel = thisUrl.substring(thisUrl.indexOf("/search/label/") + 14, thisUrl.indexOf("?updated-max"))
            } else {
                postLabel = thisUrl.substring(thisUrl.indexOf("/search/label/") + 14, thisUrl.indexOf("?&max"))
            }
        }
        if (thisUrl.indexOf("?q=") == -1 && thisUrl.indexOf(".html") == -1) {
            if (thisUrl.indexOf("/search/label/") == -1) {
                currentPage = "page";
                if (urlactivepage.indexOf("#PageNo=") != -1) {
                    currentPageNo = urlactivepage.substring(urlactivepage.indexOf("#PageNo=") + 8, urlactivepage.length)
                } else {
                    currentPageNo = 1
                }
                document.write("<script src=\"" + home_page + "feeds/posts/summary?max-results=1&alt=json-in-script&callback=totalcountdata\"><\/script>")
            } else {
                currentPage = "label";
                if (thisUrl.indexOf("&max-results=") == -1) {
                    perPage = 20
                }
                if (urlactivepage.indexOf("#PageNo=") != -1) {
                    currentPageNo = urlactivepage.substring(urlactivepage.indexOf("#PageNo=") + 8, urlactivepage.length)
                } else {
                    currentPageNo = 1
                }
                document.write('<script src="' + home_page + 'feeds/posts/summary/-/' + postLabel + '?alt=json-in-script&callback=totalcountdata&max-results=1" ><\/script>')
            }
        }
    }

    function redirectpage(numberpage) {
        jsonstart = (numberpage - 1) * perPage;
        noPage = numberpage;
        var nameBody = document.getElementsByTagName('head')[0];
        var newInclude = document.createElement('script');
        newInclude.type = 'text/javascript';
        newInclude.setAttribute("src", home_page + "feeds/posts/summary?start-index=" + jsonstart + "&max-results=1&alt=json-in-script&callback=finddatepost");
        nameBody.appendChild(newInclude)
    }

    function redirectlabel(numberpage) {
        jsonstart = (numberpage - 1) * perPage;
        noPage = numberpage;
        var nameBody = document.getElementsByTagName('head')[0];
        var newInclude = document.createElement('script');
        newInclude.type = 'text/javascript';
        newInclude.setAttribute("src", home_page + "feeds/posts/summary/-/" + postLabel + "?start-index=" + jsonstart + "&max-results=1&alt=json-in-script&callback=finddatepost");
        nameBody.appendChild(newInclude)
    }

    function finddatepost(root) {
        post = root.feed.entry[0];
        var timestamp1 = post.published.$t.substring(0, 19) + post.published.$t.substring(23, 29);
        var timestamp = encodeURIComponent(timestamp1);
        if (currentPage == "page") {
            var pAddress = "/search?updated-max=" + timestamp + "&max-results=" + perPage + "#PageNo=" + noPage
        } else {
            var pAddress = "/search/label/" + postLabel + "?updated-max=" + timestamp + "&max-results=" + perPage + "#PageNo=" + noPage
        }
        location.href = pAddress
    }
//]]>
</script>
Note: You can configure this script (if you want) to suit your blog layout by changing values marked at the top of the code.

Option (1): Change 5 to the number of posts shown in each page.

Option (2): Change 3 to the number of pages shown at one time inside the navigator.

Option (3): Change <i aria-hidden="true" class="fa fa-angle-double-left"></i> to any other Font Awesome navigation arrow or even just a simple text to indicate the (Previous) button.

Option (4): Change <i aria-hidden="true" class="fa fa-angle-double-right"></i> to any other Font Awesome navigation arrow or even just a simple text to indicate the (Next) button.

Now lets proceed to the next step, we need to include the CSS style code into the template, search for </head> ending tag again and add the following code (ABOVE) it.
<style type='text/css'>
.blog-pager {
    background: none;
    clear: both;
    text-align: center;
    font-family: 'Open Sans';
    font-size: 13px;
    font-weight: 700;
    padding: 0;
    margin-top: 20px!important;
    margin-bottom: 30px!important;
    position: relative;
    height: 23px;
}

.blog-pager a {
    font-family: 'Open Sans';
    color: #666;
    display: inline-block;
    padding: 5px 10px;
    margin-left: 2px;
    margin-right: 2px;
    border-radius: 2px;
    transition: all .6s linear;
}

.blog-pager a:hover {
    background-color: #eee;
    color: #8493A0;
    text-decoration: none;
    transition: all .2s linear;
}

.blog-pager-newer-link {
    float: left
}

.blog-pager-older-link {
    float: right
}

.blog-pager a.home-link {
    text-transform: uppercase;
    font-weight: bold;
    background-color: transparent;
    color: #666;
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
}

.blog-pager a.home-link:hover {
    background-color: #eee;
    text-decoration: none;
    color: #8493A0;
}

.displaypageNum a,
.showpage a,
.pagecurrent {
    padding: 5px 10px;
    display: inline-block;
    background-color: #fff;
    color: #666;
    margin-left: 2px;
    margin-right: 2px;
    border-radius: 2px;
    transition: all .6s linear;
}

.displaypageNum a:hover,
.showpage a:hover,
.pagecurrent {
    background-color: #eee;
    color: #8493A0;
    text-decoration: none;
    transition: all .2s linear;
}

.showpage,
.pagecurrent {
    font-weight: bold;
    color: #888;
}

.pages {
    background-color: #fff;
    color: #666;
    transition: all .2s linear;
}

span.displaypageNum.nextpage {
    float: right;
}

span.displaypageNum.prevpage {
    float: left;
}

span.showpage.prevpage {
    float: left;
}
</style>

Change Post Navigation Links to Font Awesome

This step is not necessary however, it will make your navigation text links inside blog posts appear as Font Awesome icon buttons same as the blog index and label pages, look for <data:newerPageTitle/> then replace it with:
<i aria-hidden='true' class='fa fa-angle-double-left'/>
After that, search for <data:olderPageTitle/> and replace it with:
<i aria-hidden='true' class='fa fa-angle-double-right'/>

How to Fix Label Pages

It seems that Blogger will show 20 pages each by default on a label page specifically, so to fix that behavior you will have to change every expr:href='data:label.url' inside your template to the following code.
expr:href='data:label.url + "?&amp;max-results=5"'
Change the highlighted number 5 to the number of posts that you want to be displayed inside each page, it has to be exactly the same as your configuration of JavaScript code above.

Socialize

Speak Your Mind

Explore More

Discussion