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 toTemplate → 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'/>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'/><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 everyexpr:href='data:label.url' inside your template to the following code.expr:href='data:label.url + "?&max-results=5"'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.
