Tweak Your Aspire – Show NavBar and Add Calendar  

Posted by Jaideep Walia in , , , ,

I have been receiving a lot of mails regarding tweaking of my present theme “Aspire”. Many of you are facing problems in deploying this theme and getting desired results. So to help all those who want to help themselves……

Go to Layout => Edit HTML

Do not Check “Expand Widget Templates”

Now lets start with the Navigation bar at the top.

By Default Navigation Bar is Hidden in this theme. Some of you would want to see the NavBar. So to enable it, you have to change the code as follows:-

   1: /* === Hide the NavBar === */
   2: .Navbar {
   3: visibility:hidden;
   4: display: none;
   5: }
   6: /* === Hide the NavBar === */
Remove */ at the end of line 1 and /* at the Start of line 6 from the code shown above. Now You have your NavBar.

Now let’s Add the Calendar for blog archive. Search the code below in your Aspire theme.

.up {text-transform:uppercase;}
.center {text-align:center;}
.l, .left {float:left;}
.r, .right {float:right;}
.textleft {text-align:left !important;}
.clear {clear:both;}

]]></b:skin>

Now you will have to add the code for calendar at the place as shown below.

]]></b:skin>
<!-- Add your Calendar code here -->

</head>

Copy and paste the code for adding calendar:-

<!-- Blogger Archive Calendar -->
<script type='text/javascript'>
//<![CDATA[

var bcLoadingImage = "http://phydeauxredux.googlepages.com/loading-trans.gif";
var bcLoadingMessage = " Loading....";
var bcArchiveNavText = "View Archive";
var bcArchiveNavPrev = '&#9668;';
var bcArchiveNavNext = '&#9658;';
var headDays = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
var headInitial = ["Su","Mo","Tu","We","Th","Fr","Sa"];

// Nothing to configure past this point ----------------------------------
var timeOffset;
var bcBlogID;
var calMonth;
var calDay = 1;
var calYear;
var startIndex;
var callmth;
var bcNav = new Array ();
var bcList = new Array ();

//Initialize Fill Array
var fill = ["","31","28","31","30","31","30","31","31","30","31","30","31"];
function openStatus(){
  document.getElementById('calLoadingStatus').style.display = 'block';
  document.getElementById('calendarDisplay').innerHTML = '';
 }
function closeStatus(){
  document.getElementById('calLoadingStatus').style.display = 'none';
 }
function bcLoadStatus(){
  cls = document.getElementById('calLoadingStatus');
  img = document.createElement('img');
  img.src = bcLoadingImage;
  img.style.verticalAlign = 'middle';
  cls.appendChild(img);
  txt = document.createTextNode(bcLoadingMessage);
  cls.appendChild(txt);
 }
function callArchive(mth,yr,nav){
// Check for Leap Years
 if (((yr % 4 == 0) && (yr % 100 != 0)) || (yr % 400 == 0)) {
     fill[2] = '29';
  }
 else {
     fill[2] = '28';
  }
  calMonth = mth;
  calYear = yr;
  if(mth.charAt(0) == 0){
     calMonth = mth.substring(1);
     }
  callmth = mth;
  bcNavAll = document.getElementById('bcFootAll');
  bcNavPrev = document.getElementById('bcFootPrev');
  bcNavNext = document.getElementById('bcFootNext');
  bcSelect = document.getElementById('bcSelection');
  a = document.createElement('a');
  at = document.createTextNode(bcArchiveNavText);
  a.href = bcNav[nav];
  a.appendChild(at);
  bcNavAll.innerHTML = '';
  bcNavAll.appendChild(a);
  bcNavPrev.innerHTML = '';
  bcNavNext.innerHTML = '';
  if(nav <  bcNav.length -1){
     a = document.createElement('a');
     a.innerHTML = bcArchiveNavPrev;
     bcp = parseInt(nav,10) + 1;
     a.href = bcNav[bcp];
     a.title = 'Previous Archive';
     prevSplit = bcList[bcp].split(',');
     a.onclick = function(){bcSelect.options[bcp].selected = true;openStatus();callArchive(prevSplit[0],prevSplit[1],prevSplit[2]);return false;};
     bcNavPrev.appendChild(a);
     }
  if(nav > 0){
     a = document.createElement('a');
     a.innerHTML = bcArchiveNavNext;
     bcn = parseInt(nav,10) - 1;
     a.href = bcNav[bcn];
     a.title = 'Next Archive';
     nextSplit = bcList[bcn].split(',');
     a.onclick = function(){bcSelect.options[bcn].selected = true;openStatus();callArchive(nextSplit[0],nextSplit[1],nextSplit[2]);return false;};
     bcNavNext.appendChild(a);
    }
  script = document.createElement('script');
  script.src = 'http://www.blogger.com/feeds/'+bcBlogId+'/posts/summary?published-max='+calYear+'-'+callmth+'-'+fill[calMonth]+'T23%3A59%3A59'+timeOffset+'&published-min='+calYear+'-'+callmth+'-01T00%3A00%3A00'+timeOffset+'&max-results=100&orderby=published&alt=json-in-script&callback=cReadArchive';
  document.getElementsByTagName('head')[0].appendChild(script);
}

function cReadArchive(root){
// Check for Leap Years
 if (((calYear % 4 == 0) && (calYear % 100 != 0)) || (calYear % 400 == 0)) {
     fill[2] = '29';
  }
 else {
     fill[2] = '28';
  }
   closeStatus();
   document.getElementById('lastRow').style.display = 'none';
   calDis = document.getElementById('calendarDisplay');
   var feed = root.feed;
   var total = feed.openSearch$totalResults.$t;
   var entries = feed.entry || [];
   var fillDate = new Array();
   var fillTitles = new Array();
   fillTitles.length = 32;
   var ul = document.createElement('ul');
   ul.id = 'calendarUl';
   for (var i = 0; i < feed.entry.length; ++i) {
     var entry = feed.entry[i];
     var link = entry.link[0].href;
     var title = entry.title.$t;
     var author = entry.author[0].name.$t;
     var date = entry.published.$t;
     var summary = entry.summary.$t;
     isPublished = date.split('T')[0].split('-')[2];
     if(isPublished.charAt(0) == '0'){
        isPublished = isPublished.substring(1);
        }
     fillDate.push(isPublished);
     if (fillTitles[isPublished]){
         fillTitles[isPublished] = fillTitles[isPublished] + ' | ' + title;
         }
     else {
         fillTitles[isPublished] = title;
         }
     li = document.createElement('li');
     li.style.listType = 'none';
     li.innerHTML = '<a href="'+link+'">'+title+'</a>';
     ul.appendChild(li);

     }
  calDis.appendChild(ul);
  var val1 = parseInt(calDay, 10)
  var valxx = parseInt(calMonth, 10);
  var val2 = valxx - 1;
  var val3 = parseInt(calYear, 10);
  var firstCalDay = new Date(val3,val2,1);
  var val0 = firstCalDay.getDay();
  startIndex = val0 + 1;
 var dayCount = 1;
 for (x =1; x < 38; x++){
     var cell = document.getElementById('cell'+x);
     if( x < startIndex){
         cell.innerHTML = ' ';
         cell.className = 'firstCell';
        }
     if( x >= startIndex){
         cell.innerHTML = dayCount;
         cell.className = 'filledCell';
         for(p = 0; p < fillDate.length; p++){
             if(dayCount == fillDate[p]){
                 if(fillDate[p].length == 1){
                    fillURL = '0'+fillDate[p];
                    }
                 else {
                    fillURL = fillDate[p];
                    }
                 cell.className = 'highlightCell';
                 cell.innerHTML = '<a href="/search?updated-max='+calYear+'-'+callmth+'-'+fillURL+'T23%3A59%3A59'+timeOffset+'&updated-min='+calYear+'-'+callmth+'-'+fillURL+'T00%3A00%3A00'+timeOffset+'" title="'+fillTitles[fillDate[p]].replace(/"/g,'\'')+'">'+dayCount+'</a>';
                }
             }
         if( dayCount > fill[valxx]){
            cell.innerHTML = ' ';
            cell.className = 'emptyCell'; 
            }
         dayCount++; 
        }
     }
   visTotal = parseInt(startIndex) + parseInt(fill[valxx]) -1;
   if(visTotal >35){
       document.getElementById('lastRow').style.display = '';
      }
 }

function initCal(){
  document.getElementById('blogger_calendar').style.display = 'block';
  var bcInit = document.getElementById('bloggerCalendarList').getElementsByTagName('a');
  var bcCount = document.getElementById('bloggerCalendarList').getElementsByTagName('li');
  document.getElementById('bloggerCalendarList').style.display = 'none';
  calHead = document.getElementById('bcHead');
  tr = document.createElement('tr');
  for(t = 0; t < 7; t++){
      th = document.createElement('th');
      th.abbr = headDays[t];
      scope = 'col';
      th.title = headDays[t];
      th.innerHTML = headInitial[t];
      tr.appendChild(th);
     }
  calHead.appendChild(tr);
 for (x = 0; x <bcInit.length;x++){
    var stripYear= bcInit[x].href.split('_')[0].split('/')[3];
    var stripMonth = bcInit[x].href.split('_')[1];
    bcList.push(stripMonth + ','+ stripYear + ',' + x);
    bcNav.push(bcInit[x].href);
    }
 var sel = document.createElement('select');
 sel.id = 'bcSelection';
 sel.onchange = function(){var cSend = this.options[this.selectedIndex].value.split(',');openStatus();callArchive(cSend[0],cSend[1],cSend[2]);};
 q = 0;
 for (r = 0; r <bcList.length; r++){
      var selText = bcInit[r].innerHTML;
      var selCount = bcCount[r].innerHTML.split('> (')[1];
      var selValue = bcList[r];
      sel.options[q] = new Option(selText + ' ('+selCount,selValue);
      q++
      }                   
  document.getElementById('bcaption').appendChild(sel);
  var m = bcList[0].split(',')[0];
  var y = bcList[0].split(',')[1];
  callArchive(m,y,'0');
}

function timezoneSet(root){
  var feed = root.feed;
  var updated = feed.updated.$t;
  var id = feed.id.$t;
  bcBlogId = id.split('blog-')[1];
  upLength = updated.length;
  if(updated.charAt(upLength-1) == "Z"){timeOffset = "+00:00";}
  else {timeOffset = updated.substring(upLength-6,upLength);}
  timeOffset = encodeURIComponent(timeOffset);
}

//]]>
</script>
<script src='/feeds/posts/summary?max-results=0&amp;alt=json-in-script&amp;callback=timezoneSet'/>
<!-- End Blogger Archive Calendar -->


We are almost there….

Now search the code

<b:section id='sidebarleftsection' preferred='yes'>
<b:widget id='Profile1' locked='false' title='Contributors' type='Profile'/>

And paste the code:-

<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
So that the code looks like:-
<b:section id='sidebarleftsection' preferred='yes'>
<b:widget id='Profile1' locked='false' title='Contributors' type='Profile'/>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>

Too much code :)

Now save everything and enjoy the new look of your blog.

Keep tuned in for more tweaks.

This post was:

This entry was posted on Monday, April 13, 2009 at 8:00 PM and is filed under , , , , . You can follow any responses to this entry through the comments feed .

8 comments

hi..

Mr Jaideep
when i do the step that you give to me..
i got the message:

Please correct the error below, and submit your template again.
The widget with id "Profile1" cannot contain element: "b:widget". A widget can only contain b:includable elements.

can you help me with this?

June 1, 2009 at 3:09 AM

It's working now..
Thanks a lot for the email..

June 4, 2009 at 2:23 AM

Hey, thanks for the code

2 things.. navbar still half and the archive is in list form. Help :-)!

June 12, 2009 at 12:29 AM

i cant seem to make this one work? are there still things that i need to tweak on the blog archieves for this to work?

July 29, 2009 at 8:52 AM

hi there.. can you help me to change the size of the font in Profile ( ABout Me - widget).. ive been looking it few days.. but couldnt find it.

August 24, 2009 at 12:23 PM

Hi Mr Jaideep,
When I do the final step it says this...


Please correct the error below, and submit your template again.
The widget with id "Profile1" cannot contain element: "b:widget". A widget can only contain b:includable elements.

November 11, 2009 at 10:00 PM

Hi,
Something's wrong. I can't do like you! The calendar does not emerge.

January 2, 2010 at 10:04 PM

Before editing your template make sure you have not checked
“Expand Widget Templates”
otherwise you will get the following error
The widget with id "Profile1" cannot contain element: "b:widget". A widget can only contain b:includable elements.

January 7, 2010 at 10:45 PM

Post a Comment

Post a Comment

Comment for encouragement