News Update :
Home » » Page navigation bar in blogger

Page navigation bar in blogger

By: omer nawaz on Saturday, 7 February 2015 | 22:50

In this tutorial we will learn how to add a page navigation bar with numbers for your blog Blog spot.et before starting it is re comm, ndé to make a backup of your model blogger.

After you make a backup of your blog template , use the following procedure:


 



1 Log into your blogger account and Presentation >> Edit HTML and look for the following line of code:

]]></b:skin>

And just before that line, add this CSS code:


.showpageArea {padding: 0 2px;margin-bottom:10px;margin-top:10px;<br /> }<br /> <br /> .showpageArea 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 /> .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 /> }


2 Add the following java script code :
 

Before adding the JS code below Search the following code :

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

And if you do not find the previous code, look for a similar code that begins:

<b:section class=’main’ id=’main’ ......>et se termine par </b:section>


Directly after the </ b: section> , add the following 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+'&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){   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">'+thisNum+'</span>';   }else{   if(p==0){   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++;   }   }   }    if(thisNum>1){   html = ''+upPageHtml+' '+html +' ';   }    html = '<div
class="showpageArea"><span style="COLOR: #000;" class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;    if(thisNum<(postNum-1)){   html += downPageHtml;    }    if(postNum==1) postNum++;   html += '</div>';   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;   }   }   function showpageCount2(json) {  var thisUrl = home_page_url;   var htmlMap = new Array();   var isLablePage = thisUrl.indexOf("/search/label/")!=-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 labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';   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+'&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){   upPageHtml = labelHtml + upPageWord +'</a></span>';   }else{   upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';   }    fFlag++;   }    if(p==(thisNum-1)){   html += '<span class="showpagePoint">'+thisNum+'</span>';   }else{   if(p==0){   html = labelHtml+'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++;   }   }   }    if(thisNum>1){   if(!isLablePage){   html = ''+upPageHtml+' '+html +' ';   }else{   html = ''+upPageHtml+' '+html +' ';   }   }    html = '<div class="showpageArea"><span style="COLOR: #000;" class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;    if(thisNum<(postNum-1)){   html += downPageHtml;    }    if(postNum==1) postNum++;   html += '</div>';    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><br /> <br /> <script type='text/javascript'>   var thisUrl = home_page_url;   if (thisUrl.indexOf("/search/label/")!=-1){   if (thisUrl.indexOf("?updated-max")!=-1){   var lblname1 = thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"));   }else{   var lblname1 = thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"));   }   }   var home_page = "/";   if (thisUrl.indexOf("?q=")==-1 && thisUrl.indexOf(".html")==-1){    if (thisUrl.indexOf("/search/label/")==-1){    document.write('<script src="'+home_page+'feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ><\/script>')   }else{document.write('<script src="'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&callback=showpageCount2&max-results=99999" ><\/script>')   }   }   </script>


Register your blog template.
And to customize your navigation bar you can change the following parameters:

each page count = 10;

Check the number messages per page 10 messages / Page , directory you can increase or dimmer the number of messages.
Note: The number of pages should be the same as your blogger account parameter and to adjust this parameter , follow the circuit : Dashboard >> Settings >> Layout >> Show at most.


The setting at the Show must be equal to pageCount.

Post a Comment

 
Contact Us | Privacy policy | Term of use | Advertise with Us | Site map
Copyright © 2011. Blogging Brain . All Rights Reserved.
Design Template by Blogging Brain | | Powered by Blogger