Page Navigation Widget for Blogger

Page Navigation Widget For Blogger Hosted Blogs

1. Log into your blogger account and go to Layout > Page Elements
2. Then Click on Add a Gadget
3. Amongst the Blogger Featured Widgets Choose HTML/JavaScript Widget
   
4. Inside the HTML/JavaScript Widget  paste the code below,

   <style type="text/CSS">
   .showpageArea a {
   text-decoration:underline;
   }
   .showpageNum a {
   text-decoration:none;
   border: 1px solid #7AA1C3;
   margin:0 3px;
   padding:3px;
   }
   .showpageNum a:hover {
   border: 1px solid #7AA1C3;
   background-color:#F6F6F6;
   }
   .showpagePoint {
   color:#333;
   text-decoration:none;
   border: 1px solid #7AA1C3;
   background: #F6F6F6;
   margin:0 3px;
   padding:3px;
   }
   .showpageOf {
   text-decoration:none;
   padding:3px;
   margin: 0 3px 0 0;
   }
   .showpage a {
   text-decoration:none;
   border: 1px solid #7AA1C3;
   padding:3px;
   }
   .showpage a:hover {
   text-decoration:none;
   }
   .showpageNum a:link,.showpage a:link {
   text-decoration:none;
   color:#7AA1C3;
   }
   </style>
   <script type="text/JavaScript">
   function showpageCount(json) {
   var thisUrl = location.href;
   var htmlMap = new Array();
   var isFirstPage = thisUrl.substring(thisUrl.length-5,thisUrl.length)==".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 = 2;
   var displayPageNum = 5;
   var upPageWord = 'Previous';
   var downPageWord = 'Next';
   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">'+thisNum+'</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 = ''+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>';
   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>

5. If you are using a domain other than .blogspot.com or .com, then kindly change  the bolded red text .com with your domain extension. For Example if your domain ends with .info or .biz than replace .com with .info or .biz . But if you are a BlogSpot user than leave the code unchanged.
6. Once you have pasted the code inside the widget, simply drag your HTML/Javascript widget to the area just below your posts and drop it there, as shown in the picture below,

SOURCE: http://www.mybloggertricks.com/
(Author of this blog is Muhammad Mustafa Ahmedzai, I personally love this blog)

That’s All!

Hope you enjoyed it. Let me know if anything is unclear.

Continue reading →