ADD PAGE NAVIGATION TO BLOGGER

Page Navigation is very helpful to navigate the posts in your blog,and it helps your readers to move deep archive. It can include Beautiful page navigation in your blog. Here i give a small step-By-step guide to add this to your blog . Myself also included this navigation in my blog.Have a Look at it. :)

• Copy the CSS Code Below and Paste it in HTML code before </b:skin>
  

  
  div.pagination {
  font-size: 11px;
  font-family: Tahoma, Arial, Helvetica, Sans-serif;
  padding:2px;
  background-color:#c1c1c1;
  }
  
  
  div.pagination a {
  padding: 2px 5px 2px 5px;
  margin: 2px;
  background-color:#c1c1c1;
  text-decoration: none; /* no underline */
  color: #000;
  }
  div.pagination a:hover, div.pagination a:active {
  background-color:#99ffff;
  color: #000;
  }
  div.pagination span.current {
  padding: 2px 5px 2px 5px;
  margin: 2px;
  font-weight: bold;
  background-color: #fff;
  color: #303030;
  }
  div.pagination span.disabled {
  padding: 2px 5px 2px 5px;
  margin: 2px;
  background-color:#c1c1c1;
  color: #797979;
  }

• Now Search for :

<b:section class='main' id='main' showaddelement='yes'> <b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/> </b:section>

• Now add Below Code after the above Code.

  
  &lt;script type=&quot;text/javascript&quot;&gt;
  
  function showpageCount(json) {
  var thisUrl = location.href;
  var htmlMap = new Array();
  var isFirstPage = thisUrl.substring(thisUrl.length-5,thisUrl.length)==&quot;.com/&quot;;
  var isLablePage = thisUrl.indexOf(&quot;/search/label/&quot;)!=-1;
  var isPage = thisUrl.indexOf(&quot;/search?updated&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= &#39;&#39;;
  var upPageHtml =&#39;&#39;;
  var downPageHtml =&#39;&#39;;
  
  var pageCount = 5;
  var displayPageNum = 5;
  var upPageWord = &#39;Previous&#39;;
  var downPageWord = &#39;Next&#39;;
  
  
  
  var labelHtml = &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;/search/label/&#39;+thisLable+&#39;?&amp;max-results=&#39;+pageCount+&#39;&quot;&gt;&#39;;
  
  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!=&#39;&#39;){
  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] = &#39;/search/label/&#39;+thisLable+&#39;?updated-max=&#39;+timestamp+&#39;T00%3A00%3A00%2B08%3A00&amp;max-results=&#39;+pageCount;
  }
  }
  }
  }//end if(post.category){
  
  itemCount++;
  }
  
  }else{
  if(title!=&#39;&#39;){
  if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
  if(thisUrl.indexOf(timestamp)!=-1 ){
  thisNum = postNum;
  }
  
  if(title!=&#39;&#39;) postNum++;
  htmlMap[htmlMap.length] = &#39;/search?updated-max=&#39;+timestamp+&#39;T00%3A00%3A00%2B08%3A00&amp;max-results=&#39;+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){
  if(isLablePage){
  upPageHtml = labelHtml + upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
  }else{
  upPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;/&quot;&gt;&#39;+ upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
  }
  }else{
  upPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
  }
  
  fFlag++;
  }
  
  if(p==(thisNum-1)){
  html += &#39;&lt;span class=&quot;showpagePoint&quot;&gt;&#39;+thisNum+&#39;&lt;/span&gt;&#39;;
  }else{
  if(p==0){
  if(isLablePage){
  html = labelHtml+&#39;1&lt;/a&gt;&lt;/span&gt;&#39;;
  }else{
  html += &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;/&quot;&gt;1&lt;/a&gt;&lt;/span&gt;&#39;;
  }
  }else{
  html += &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ (p+1) +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
  }
  }
  
  if(eFlag ==0 &amp;&amp; p == thisNum){
  downPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt; &lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ downPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
  eFlag++;
  }
  }//end if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){
  }//end for(var p =0;p&lt; htmlMap.length;p++){
  
  if(thisNum&gt;1){
  if(!isLablePage){
  html = &#39;&#39;+upPageHtml+&#39; &#39;+html +&#39; &#39;;
  }else{
  html = &#39;&#39;+upPageHtml+&#39; &#39;+html +&#39; &#39;;
  }
  }
  
  html = &#39;&lt;div class=&quot;showpageArea&quot;&gt;&lt;span style=&quot;COLOR: #000;&quot; class=&quot;showpageOf&quot;&gt; Pages (&#39;+(postNum-1)+&#39;)&lt;/span&gt;&#39;+html;
  
  if(thisNum&lt;(postNum-1)){
  html += downPageHtml;
  
  }
  
  if(postNum==1) postNum++;
  html += &#39;&lt;/div&gt;&#39;;
  
  if(isPage || isFirstPage || isLablePage){
  var pageArea = document.getElementsByName(&quot;pageArea&quot;);
  var blogPager = document.getElementById(&quot;blog-pager&quot;);
  
  if(postNum &lt;= 2){
  html =&#39;&#39;;
  }
  
  for(var p =0;p&lt; pageArea.length;p++){
  pageArea[p].innerHTML = html;
  }
  
  if(pageArea&amp;&amp;pageArea.length&gt;0){
  html =&#39;&#39;;
  }
  
  if(blogPager){
  blogPager.innerHTML = html;
  }
  }
  
  }
  &lt;/script&gt;
  
  &lt;script src=&quot;/feeds/posts/summary?alt=json-in-script&amp;callback=showpageCount&amp;max-results=99999&quot;; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
  }

• Now Save it .And refresh your Blog.

Kindly Bookmark this Post using your favorite Bookmarking service: