Adding Numbered Page Navigation Bar For Blogger

Wednesday, May 26, 2010 | Tags: blogger tricks and hacks

Digg it | Stumble it | Save to Del.ico.us

hi all, today we are going to learn how to add page navigation bar with numbers for blogspot blogs,

i’m sure that most of you have a lot of posts and the default blogger way to navigate between new post and old post is boring. what if your visitors wants to read for your oldest posts?
should he keep clicking on “older posts”, No.
You should apply this hack for your template, it’s one of the most useful blogger tricks ever.
so lets see how to do it.

Caution : Please backup your template (Download Full Template) Before making any changes.

Step 1: Adding The CSS Code.

Log into your blogger account and go to,
Dashboard >> Layout >> Edit html.
And find the following code.

]]></b:skin>

And just before it Add the next code

.showpageArea {<span class="IL_AD" id="IL_AD3">padding</span>: 0 2px;<span class="IL_AD" id="IL_AD11">margin</span>-bottom:10px;margin-top:10px;<br>}<br><br>.showpageArea a {<span class="IL_AD" id="IL_AD6">border</span>: 1px <span class="IL_AD" id="IL_AD9">solid</span> #505050;<br>color: #000000;font-weight:normal;<br>padding: 3px 6px !important;<br>padding: 1px 4px ;margin:0px 4px;<br><span class="IL_AD" id="IL_AD1">text-decoration</span>: none;<br>}<br>.showpageArea a:hover {<br>font-size:11px;<br>border: 1px solid #333;<br>color: #000000;<br>background-color: #FFFFFF;<br>}<br><br>.showpageNum a {border: 1px solid #505050;<br>color: #000000;font-weight:normal;<br>padding: 3px 6px !important;<br>padding: 1px 4px ;margin:0px 4px;<br>text-decoration: none;<br><br>}<br>.showpageNum a:hover {<br>font-size:11px;<br>border: 1px solid #333;<br>color: #000000;<br>background-color: #FFFFFF;<br><br>}<br>.showpagePoint {font-size:11px;<br>padding: 2px 4px 2px 4px;<br>margin: 2px;<br>font-weight: bold;<br>border: 1px solid #333;<br>color: #fff;<br>background-color: #000000;<br><br>}<br><br>.showpage a:hover {font-size:11px;<br>border: 1px solid #333;<br>color: #000000;<br>background-color: #FFFFFF;<br><br>}<br>.showpageNum a:link,.showpage a:link {<br>font-size:11px;<br>padding: 2px 4px 2px 4px;<br>margin: 2px;<br>text-decoration: none;<br>border: 1px solid #0066cc;<br>color: #0066cc;<br>background-color: #FFFFFF;}<br><br>.showpageNum a:hover {font-size:11px;<br>border: 1px solid #333;<br>color: #000000;<br>background-color: #FFFFFF;<br>}

Step 2: Adding The Java Code.

Find the next code Or some similar code

<b:section <span class="IL_AD" id="IL_AD8">class</span>=’main’ id=’main’ showaddelement=’yes’><br><b:widget id=’Blog1′ locked=’true’ title=’Blog Posts’ type=’Blog’/><br></b:section>

And After the Tag add the next code.

<<span class="IL_AD" id="IL_AD12">script type</span>='text/javascript'><br><br>var home_page_url = location.href; <br><br><br>var pageCount=10;<br>  var displayPageNum=6;<br>  var upPageWord ='Previous';<br>  var downPageWord ='Next';<br><br><br>function showpageCount(json) {<br>  var thisUrl = home_page_url;<br>  var htmlMap = new Array();<br>  var thisNum = 1;<br>  var postNum=1;<br>  var itemCount = 0;<br>  var fFlag = 0;<br>  var eFlag = 0;<br>  var html= '';<br>  var upPageHtml ='';<br>  var downPageHtml ='';<br><br> <br><br> <br><br>for(var i=0, post; post = json.feed.entry[i]; i++) {<br><br> var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);<br>  timestamp = encodeURIComponent(timestamp1);<br><br><br>  var title = post.title.$t;<br><br> if(title!=''){<br>  if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){<br>  if(thisUrl.indexOf(timestamp)!=-1 ){<br>  thisNum = postNum;<br>  }<br><br>  if(title!='') postNum++;<br>  htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'&max-results='+pageCount;<br>  }<br>  }<br>  itemCount++;<br><br>  }<br><br>  for(var p =0;p< htmlMap.length;p++){<br>  if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){<br>  if(fFlag ==0 && p == thisNum-2){<br>  if(thisNum==2){<br>  upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';<br>  }else{<br>  upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';<br>  }<br><br>  fFlag++;<br>  }<br><br>  if(p==(thisNum-1)){<br>  html += '<span class="showpagePoint">'+thisNum+'</span>';<br>  }else{<br>  if(p==0){<br>  html += '<span class="showpageNum"><a href="/">1</a></span>';<br><br> }else{<br>  html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +'</a></span>';<br>  }<br>  }<br><br>  if(eFlag ==0 && p == thisNum){<br>  downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';<br>  eFlag++;<br>  }<br>  }<br>  }<br><br>  if(thisNum>1){<br>  html = ''+upPageHtml+' '+html +' ';<br>  }<br><br>  html = '<div class="showpageArea"><span style="COLOR: #000;" class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;<br><br>  if(thisNum<(postNum-1)){<br>  html += downPageHtml; <br>  }<br><br>  if(postNum==1) postNum++;<br>  html += '</div>';<br><br><br>var pageArea = document.getElementsByName("pageArea");<br>  var blogPager = document.getElementById("blog-pager");<br><br>if(postNum <= 2){<br>  html ='';<br>  }<br><br>for(var p =0;p< pageArea.length;p++){<br>  pageArea[p].innerHTML = html;<br>  }<br><br>if(pageArea&&pageArea.length>0){<br>  html ='';<br>  }<br><br>if(blogPager){<br>  blogPager.innerHTML = html;<br>  }<br><br><br>}<br><br><br>function showpageCount2(json) {<br><br>var thisUrl = home_page_url;<br>  var htmlMap = new Array();<br>  var isLablePage = thisUrl.indexOf("/search/label/")!=-1;<br>  var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";<br>  thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;<br>  var thisNum = 1;<br>  var postNum=1;<br>  var itemCount = 0;<br>  var fFlag = 0;<br>  var eFlag = 0;<br>  var html= '';<br>  var upPageHtml ='';<br>  var downPageHtml ='';<br><br> <br><br>var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';<br>  var thisUrl = home_page_url; <br><br><br>for(var i=0, post; post = json.feed.entry[i]; i++) {<br><br> var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);<br>  timestamp = encodeURIComponent(timestamp1);<br><br><br><br>  var title = post.title.$t;<br><br> if(title!=''){<br>  if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){<br>  if(thisUrl.indexOf(timestamp)!=-1 ){<br>  thisNum = postNum;<br>  }<br><br>  if(title!='') postNum++;<br>  htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'&max-results='+pageCount;<br><br>  }<br>  }<br>  itemCount++;<br>  }<br><br>  for(var p =0;p< htmlMap.length;p++){<br>  if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){<br>  if(fFlag ==0 && p == thisNum-2){<br>  if(thisNum==2){<br>  upPageHtml = labelHtml + upPageWord +'</a></span>';<br>  }else{<br>  upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';<br>  }<br><br>  fFlag++;<br>  }<br><br>  if(p==(thisNum-1)){<br>  html += '<span class="showpagePoint">'+thisNum+'</span>';<br>  }else{<br>  if(p==0){<br>  html = labelHtml+'1</a></span>';<br>  }else{<br>  html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +'</a></span>';<br>  }<br>  }<br><br>  if(eFlag ==0 && p == thisNum){<br>  downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';<br>  eFlag++;<br>  }<br>  }<br>  }<br><br>  if(thisNum>1){<br>  if(!isLablePage){<br>  html = ''+upPageHtml+' '+html +' ';<br>  }else{<br>  html = ''+upPageHtml+' '+html +' ';<br>  }<br>  }<br><br>  html = '<div class="showpageArea"><span style="COLOR: #000;" class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;<br><br>  if(thisNum<(postNum-1)){<br>  html += downPageHtml; <br>  }<br><br>  if(postNum==1) postNum++;<br>  html += '</div>';<br><br>  var pageArea = document.getElementsByName("pageArea");<br>  var blogPager = document.getElementById("blog-pager");<br><br>if(postNum <= 2){<br>  html ='';<br>  }<br><br>for(var p =0;p< pageArea.length;p++){<br>  pageArea[p].innerHTML = html;<br>  }<br><br>if(pageArea&&pageArea.length>0){<br>  html ='';<br>  }<br><br>if(blogPager){<br>  blogPager.innerHTML = html;<br>  }<br><br><br>}<br><br><br></script><br><br><script type='text/javascript'><br><br> var thisUrl = home_page_url;<br>  if (thisUrl.indexOf("/search/label/")!=-1){<br>  if (thisUrl.indexOf("?updated-max")!=-1){<br>  var lblname1 = thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"));<br>  }else{<br>  var lblname1 = thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"));<br>  }<br>  }<br><br> var home_page = "/";<br>  if (thisUrl.indexOf("?q=")==-1 && thisUrl.indexOf(".html")==-1){ <br>  if (thisUrl.indexOf("/search/label/")==-1){ <br>  document.write('<script src="'+home_page+'feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ><\/script>')<br>  }else{document.write('<script src="'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&callback=showpageCount2&max-results=99999" ><\/script>')<br>  }<br>  }<br>  </script><br>

And Click “save template”
In the above code you may only edit four lines to customize your navigation bar.

var pageCount=<font color="#3366ff"><strong>10</strong></font>;

In this code Number 10 control the number for posts per page, you can change it to choose how many posts per page you want to display.
Note : This Number value should be the same With in your blogger account settings
The settings can be found by going to Dashboard >> Setting >> Formatting >> Show >> 10 posts

var displayPageNum=<strong><font color="#3300ff">6</font></strong>;<font color="#009900"><strong></strong></font>

Number 6 here control the number of pages that will be shown in the navigation bar.

var upPageWord ='Previous';
var downPageWord ='Next';

if you want to change the language or just change it to any thing, please change Previous for example to Older

Final Step

This blogger trick my cause some problems if you use labels in your posts and to solve this problems you have to apply the next step for your template.
1. Add Label Gadget To Your Template by going to Layout >> page elements >> Add Gadget >> Select Labels and add it to your template.
2. go to, Dashboard >> Layout >> Edit html.
And find the following code.

<a expr:dir=’data:blog.languageDirection’ expr:href=’data:label.url’><data:label.name/></a>

And replace it with the following code.

<script type='text/javascript'><br>var lblname = "<data:label.name/>";<br><br>lblname2 = encodeURIComponent(lblname);<br>var feedlink = '/search/label/' + lblname2+'?&max-results=10';<br>document.write('<a href="' + feedlink + '">'+lblname+'</a>');<br></script><br><script type="text/javascript">
  var lblname = "<data :label.name/>";

  lblname2 = encodeURIComponent(lblname);
  var feedlink = '/search/label/' + lblname2+'?&max-results=10';
  document.write('<a href="' + feedlink + '">'+lblname+'</a>');
</script><br>

And Click “save template”
We are done.