Simple JavaScript Page Navigation for Blogger

By default Blogger has a simple navigation system to navigate between the posts and pages. This page navigation has just three buttons, one for next one for previous and one for home. this simple page navigation system is best to navigate between the posts but on pages and on post summary pages it does not seems good to work. For example if a visitor has to go the last post then he or she has to go through all the posts by using previous button.

To overcome this problem, there are many beautiful and handy page navigation widgets are available in Blogger world. These page navigation widgets have different styles and way of working. Using these widgets any one can make his or her blog awesome and user friendly.

The page navigation widget we have shared below is a bit different from others available in market. Usually page navigation widgets have back link to their developers and they have their main JavaScript code hosted on remote sites. Since the remote hosting often remains down, resulting in the stoppage of the page navigation widget to work properly. Our page navigation widget has no such problem with it.

Features

• Fully customizable CSS.
• Easy to install.
• Simple and cross-browser.
• No back link to the developers.
• Complete code, no external file.

Installation

1. Go to Blogger.
2. Open your desired Blog.
3. Open layout.
4. Add HTML-JAVASCRIPT gadget.
5. Copy and paste the code given below.
6. Click Save and you are done.

Code

<style>
.showpageArea {padding: 0 5px;
margin-top: 10px;
margin-bottom: 10px;
}
.showpageArea a {border: 1px solid #505050;
color: #000000;
font-weight: normal;
padding: 3px 6px !important;
margin: 0px 4px;
text-decoration: none;
}
.showpageArea a:hover {font-size: 11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}
.showpageNum a {border: 1px solid #505050;
color: #000000;
font-weight: normal;
padding: 3px 6px !important;
margin: 0px 4px;
text-decoration: none;
}
.showpageNum a:hover {font-size: 11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}
.showpagePoint {font-size: 11px;
padding: 2px 4px 2px 4px;
margin: 2px;
font-weight: bold;
border: 1px solid #333;
color: #fff;
background-color: #000000;
}
.showpage a:hover {font-size: 11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}
.showpageNum a:link,.showpage a:link {font-size: 11px;
padding: 2px 4px 2px 4px;
margin: 2px;
text-decoration: none;
border: 1px solid #0066cc;
color: #0066cc;
background-color: #FFFFFF;
}
.showpageNum a:hover {font-size: 11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}
</style>
<script type="text/javascript">
function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length) == ".blogspot.com/";
var isLablePage = thisUrl.indexOf("/search/label/") != -1;
var isPage = thisUrl.indexOf("/search?updated") != -1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+ 14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?") != -1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';
var pageCount=4;
var displayPageNum=5;
var firstPageWord = 'First';
var endPageWord = 'Last';
var upPageWord ='<';
var downPageWord ='>';
var labelHtml = '<span class="showpageNum"><a href="/search/label/'+ thisLable +'?&max-results='+ pageCount +'">';
for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title! = ''){
if(post.category){
for(var c = 0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term) == thisLable){
if(itemCount == 0 || (itemCount % pageCount == (pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}
postNum++;
htmlMap[htmlMap.length] = '/search/label/' + thisLable + '?updated-max=' + timestamp + 'T00%3A00%3A00%2B08%3A00&max-results=' + pageCount;
}
}
}
}//end if(post.category){
itemCount++;
}
}else{
if(title != ''){
if(itemCount == 0 || (itemCount % pageCount == (pageCount-1))){
if(thisUrl.indexOf(timestamp) != -1 ){
thisNum = postNum;
}
if(title != '') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max=' + timestamp + 'T00%3A00%3A00%2B08%3A00&max-results=' + pageCount;
}
}
itemCount++;
}
}
for(var p = 0; p < htmlMap.length; p++){
if(p >= (thisNum-displayPageNum-1) && p < (thisNum+displayPageNum)){
if(fFlag == 0 && p == thisNum-2){
if(thisNum == 2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord + '</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="/">' + upPageWord + '</a></span>';
}
}else{
upPageHtml = '<span class="showpage"><a href="' + htmlMap[p] + '">' + upPageWord + '</a></span>';
}
fFlag++;
}
if(p == (thisNum-1)){
html += ' <span class="showpagePoint"><u>' + thisNum + '</u></span>';
}else{
if(p == 0){
if(isLablePage){
html = labelHtml +'1</a></span>';
}else{
html += '<span class="showpageNum"><a href="/">1</a></span>';
}
}else{
html += '<span class="showpageNum"><a href="' + htmlMap[p] + '">' + (p+1) + ' </a></span>';
}
}
if(eFlag == 0 && p == thisNum){
downPageHtml = '<span class="showpage"><a href="' + htmlMap[p] + '">' + downPageWord + '</a></span>';
eFlag++;
}
}//end if(p >= (thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
}//end for(var p = 0; p < htmlMap.length; p++){
if(thisNum > 1){
if(!isLablePage){
html = '<span class="showpage"><a href="/">' + firstPageWord + ' </a></span>' + upPageHtml + ' ' + html + ' ';
}else{
html = '' + labelHtml + firstPageWord + ' </a></span>' + upPageHtml + ' ' + html + ' ';
}
}
html = '<div class="showpageArea">' + html;
if(thisNum < (postNum-1)){
html += downPageHtml;
html += '<span class="showpage"><a href="' + htmlMap[htmlMap.length-1] + '"> '+ endPageWord + '</a></span>';
}
if(postNum == 1) postNum++;
html += '</div>';
if(isPage || isFirstPage || isLablePage){
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");
if(postNum <= 2){
html ='';
}
for(var p = 0; p < pageArea.length; p++){
pageArea[p].innerHTML = html;
}
if(pageArea && pageArea.length > 0){
html ='';
}
if(blogPager){
blogPager.innerHTML = html;
}
}
}
</script>
<script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"></script>
<div style="display:none;"> </div>

If you have any queries feel free to ask