How To Add Numbered Page Navigation Bar For Blogger

Instructions

1. Adding The CSS Code                                                                                                      Log into your blogger account and goto,Dashboard >> Layout/Design >> Edit html.Always make sure you backup your template(just incase but don't worry you will get it right),and find the following code.]]></b:skin> And just before it Add the next code

.showpageArea {padding: 0 2px;margin-bottom:10px;margin-top:10px;

}

.showpageArea a {border: 1px solid #505050;

color: #000000;font-weight:normal;

padding: 3px 6px !important;

padding: 1px 4px ;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;

padding: 1px 4px ;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;

}

 2.  Adding The Java Code.

Find the next code Or some similar code

<b:section class=’main’ id=’main’ showaddelement=’yes’>

<b:widget id=’Blog1′ locked=’true’ title=’Blog Posts’ type=’Blog’/>

</b:section>

And After the </b:section> Tag add the next code.

<script type='text/javascript'>

var home_page_url = location.href; 

var pageCount=10;

  var displayPageNum=6;

  var upPageWord ='Previous';

  var downPageWord ='Next';

function showpageCount(json) {

  var thisUrl = home_page_url;

  var htmlMap = new Array();

  var thisNum = 1;

  var postNum=1;

  var itemCount = 0;

  var fFlag = 0;

  var eFlag = 0;

  var html= '';

  var upPageHtml ='';

  var downPageHtml ='';

for(var i=0, post; post = json.feed.entry[i]; i++) {

 var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);

  timestamp = encodeURIComponent(timestamp1);

  var title = post.title.$t;

 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+'&amp;max-results='+pageCount;

  }

  }

  itemCount++;

  }

  for(var p =0;p&lt; htmlMap.length;p++){

  if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){

  if(fFlag ==0 &amp;&amp; p == thisNum-2){

  if(thisNum==2){

  upPageHtml = '&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;/&quot;&gt;'+ upPageWord +'&lt;/a&gt;&lt;/span&gt;';

  }else{

  upPageHtml = '&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;'+htmlMap[p]+'&quot;&gt;'+ upPageWord +'&lt;/a&gt;&lt;/span&gt;';

  }

  fFlag++;

  }

  if(p==(thisNum-1)){

  html += '&lt;span class=&quot;showpagePoint&quot;&gt;'+thisNum+'&lt;/span&gt;';

  }else{

  if(p==0){

  html += '&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;/&quot;&gt;1&lt;/a&gt;&lt;/span&gt;';

 }else{

  html += '&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;'+htmlMap[p]+'&quot;&gt;'+ (p+1) +'&lt;/a&gt;&lt;/span&gt;';

  }

  }

  if(eFlag ==0 &amp;&amp; p == thisNum){

  downPageHtml = '&lt;span class=&quot;showpage&quot;&gt; &lt;a href=&quot;'+htmlMap[p]+'&quot;&gt;'+ downPageWord +'&lt;/a&gt;&lt;/span&gt;';

  eFlag++;

  }

  }

  }

  if(thisNum&gt;1){

  html = ''+upPageHtml+' '+html +' ';

  }

  html = '&lt;div class=&quot;showpageArea&quot;&gt;&lt;span style=&quot;COLOR: #000;&quot; class=&quot;showpageOf&quot;&gt; Pages ('+(postNum-1)+')&lt;/span&gt;'+html;

  if(thisNum&lt;(postNum-1)){

  html += downPageHtml; 

  }

  if(postNum==1) postNum++;

  html += '&lt;/div&gt;';

var pageArea = document.getElementsByName(&quot;pageArea&quot;);

  var blogPager = document.getElementById(&quot;blog-pager&quot;);

if(postNum &lt;= 2){

  html ='';

  }

for(var p =0;p&lt; pageArea.length;p++){

  pageArea[p].innerHTML = html;

  }

if(pageArea&amp;&amp;pageArea.length&gt;0){

  html ='';

  }

if(blogPager){

  blogPager.innerHTML = html;

  }

}

function showpageCount2(json) {

var thisUrl = home_page_url;

  var htmlMap = new Array();

  var isLablePage = thisUrl.indexOf(&quot;/search/label/&quot;)!=-1;

  var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf(&quot;/search/label/&quot;)+14,thisUrl.length) : &quot;&quot;;

  thisLable = thisLable.indexOf(&quot;?&quot;)!=-1 ? thisLable.substr(0,thisLable.indexOf(&quot;?&quot;)) : thisLable;

  var thisNum = 1;

  var postNum=1;

  var itemCount = 0;

  var fFlag = 0;

  var eFlag = 0;

  var html= '';

  var upPageHtml ='';

  var downPageHtml ='';

var labelHtml = '&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;/search/label/'+thisLable+'?&amp;max-results='+pageCount+'&quot;&gt;';

  var thisUrl = home_page_url; 

for(var i=0, post; post = json.feed.entry[i]; i++) {

 var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);

  timestamp = encodeURIComponent(timestamp1);

  var title = post.title.$t;

 if(title!=''){

  if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){

  if(thisUrl.indexOf(timestamp)!=-1 ){

  thisNum = postNum;

  }

  if(title!='') postNum++;

  htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'&amp;max-results='+pageCount;

  }

  }

  itemCount++;

  }

  for(var p =0;p&lt; htmlMap.length;p++){

  if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){

  if(fFlag ==0 &amp;&amp; p == thisNum-2){

  if(thisNum==2){

  upPageHtml = labelHtml + upPageWord +'&lt;/a&gt;&lt;/span&gt;';

  }else{

  upPageHtml = '&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;'+htmlMap[p]+'&quot;&gt;'+ upPageWord +'&lt;/a&gt;&lt;/span&gt;';

  }

  fFlag++;

  }

  if(p==(thisNum-1)){

  html += '&lt;span class=&quot;showpagePoint&quot;&gt;'+thisNum+'&lt;/span&gt;';

  }else{

  if(p==0){

  html = labelHtml+'1&lt;/a&gt;&lt;/span&gt;';

  }else{

  html += '&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;'+htmlMap[p]+'&quot;&gt;'+ (p+1) +'&lt;/a&gt;&lt;/span&gt;';

  }

  }

  if(eFlag ==0 &amp;&amp; p == thisNum){

  downPageHtml = '&lt;span class=&quot;showpage&quot;&gt; &lt;a href=&quot;'+htmlMap[p]+'&quot;&gt;'+ downPageWord +'&lt;/a&gt;&lt;/span&gt;';

  eFlag++;

  }

  }

  }

  if(thisNum&gt;1){

  if(!isLablePage){

  html = ''+upPageHtml+' '+html +' ';

  }else{

  html = ''+upPageHtml+' '+html +' ';

  }

  }

  html = '&lt;div class=&quot;showpageArea&quot;&gt;&lt;span style=&quot;COLOR: #000;&quot; class=&quot;showpageOf&quot;&gt; Pages ('+(postNum-1)+')&lt;/span&gt;'+html;

  if(thisNum&lt;(postNum-1)){

  html += downPageHtml; 

  }

  if(postNum==1) postNum++;

  html += '&lt;/div&gt;';

  var pageArea = document.getElementsByName(&quot;pageArea&quot;);

  var blogPager = document.getElementById(&quot;blog-pager&quot;);

if(postNum &lt;= 2){

  html ='';

  }

for(var p =0;p&lt; pageArea.length;p++){

  pageArea[p].innerHTML = html;

  }

if(pageArea&amp;&amp;pageArea.length&gt;0){

  html ='';

  }

if(blogPager){

  blogPager.innerHTML = html;

  }

}

</script>

<script type='text/javascript'>

 var thisUrl = home_page_url;

  if (thisUrl.indexOf(&quot;/search/label/&quot;)!=-1){

  if (thisUrl.indexOf(&quot;?updated-max&quot;)!=-1){

  var lblname1 = thisUrl.substring(thisUrl.indexOf(&quot;/search/label/&quot;)+14,thisUrl.indexOf(&quot;?updated-max&quot;));

  }else{

  var lblname1 = thisUrl.substring(thisUrl.indexOf(&quot;/search/label/&quot;)+14,thisUrl.indexOf(&quot;?&amp;max&quot;));

  }

  }

 var home_page = &quot;/&quot;;

  if (thisUrl.indexOf(&quot;?q=&quot;)==-1 &amp;&amp; thisUrl.indexOf(&quot;.html&quot;)==-1){ 

  if (thisUrl.indexOf(&quot;/search/label/&quot;)==-1){ 

  document.write('&lt;script src=&quot;'+home_page+'feeds/posts/summary?alt=json-in-script&amp;callback=showpageCount&amp;max-results=99999&quot; &gt;&lt;\/script&gt;')

  }else{document.write('&lt;script src=&quot;'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&amp;callback=showpageCount2&amp;max-results=99999&quot; &gt;&lt;\/script&gt;')

  }

  }

  </script>

  And Click “save template” and WALA you through...

In the above code you may only edit four lines to customize your navigation bar.

var pageCount=10;

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=6;

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 Previousfor example to Older

Like This Article If You Appreciate it and DON'T FORGET TO DROP YOUR COMMENTS...Recommend This Post To Google By Clicking on the Plus +1