Stylized Page Navigation Widget For Blogger!

SHARE:

As mentioned in the download page of some MBT Crunch Theme that it has a Page Navigation Widget that is an alternative to Recent Posts, Home and Older Posts links at the bottom of blogger hosted blogs. In order to add the stylized version of Page Navigation Widget created by Abu Farhan to MBT Crunch Theme, follow the steps below,

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,

5. 1. <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>

   2. 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.
   3. 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,
   
   
   
   
   That’s All!
   Hope you enjoyed it. Let me know if anything is unclear.
   
   

SHARE: