Poor Man's Technology Blog: important

important

Posted in | 12:37 AM

Replacing the Archive Widget With Calendar Widget

Monday, December 13, 2010

Written by Daniel Likin

Hi bloggy readers,

Anyway, as many of you know, the default version of archive widget on Blogger is shown in the drop-down element that can display the whole article titles of your blog by pushing the tab of month you want to explore in your blog. But, what if you got bored with the appearance of that blog archive widget, and are keen to try something new on your blog? Well, if you are in this situation, you can try this cool hacked widget, called Calendar Widget for Blog.

From the name of this widget, i bet you will get the point right away about what this widget can really offer to you and your blog. Yes, you are definitely right. Blog Archive Calendar is a widget that does know how to provide bloggers with a simple and cool navigation in the form of calendar, and will display the entire article titles of your blog. Although, not many bloggers have used this widget, but it can be a cool addition for your Blogger widgets. Anyway, all the credits go to Phydeaux3 for providing this cool widget for us.

1. Sign in to your Blogger account

Firstly, now head on to Blogger.com and sign in to your account.

2. Go to Edit HTML

In the Dashboard, now press Layout/Design > Edit HTML.

3. Make a back up template

Okay, you might be boring with the repetitive instruction to make a back up template of your blog. Well, don't be. After all, it's for your own good. To make a back up template of your existing blog template, now by pressing Download Full Templates, you will be prompted to save the template in your computer. My suggestion, save it to desktop to make it easier for you to re-upload it to Blogger machine.

4. Find the Code

I assume that right now, you have installed a blog archive widget (Dashboard - Layout/Design - Page Element - Add a Gadget - Blog Archive) on your blog, so the code of that widget can be easily found on the bottom position of blog template. Now find the code that controls the Blog Archive widget (Ctrl + F):

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Followers1' locked='false' title='Followers' type='Followers'/>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
</b:section>
</div>

As you can see in that code above, the red code i've already marked indicates the widget code that controls the existence of Blog Archive widget.

5. Paste the New widget code of Blog Archive

After locating the widget code of Blog Archive, now i want you to block the red code above (on number 4), and then replace it by using the code below:

<b:widget id='BlogArchive1' locked='false' title='Blog Archive'  type='BlogArchive'>

<b:includable id='main'>

  <b:if  cond='data:title'>

    <h2><data:title/></h2>

   </b:if>

  <div class='widget-content'>

  <div  id='ArchiveList'>

  <div expr:id='data:widget.instanceId +  "_ArchiveList"'>

    <b:if cond='data:style == "HIERARCHY"'>

      <b:include data='data' name='interval'/>

    </b:if>

     <b:if cond='data:style == "FLAT"'>

      <b:include data='data'  name='flat'/>

    </b:if>

    <b:if cond='data:style ==  "MENU"'>

      <b:include data='data' name='menu'/>

     </b:if>

  </div>

  </div>

  <b:include  name='quickedit'/>

   </div>

</b:includable>

<b:includable id='toggle'  var='interval'>

  <!-- Toggle not needed for Calendar  -->

</b:includable>

<b:includable id='flat'  var='data'>

 <div id='bloggerCalendarList'>

  <ul>

     <b:loop values='data:data' var='i'>

      <li  class='archivedate'>

        <a  expr:href='data:i.url'><data:i.name/></a>  (<data:i.post-count/>)

      </li>

    </b:loop>

   </ul>

 </div>

<div id='blogger_calendar'  style='display:none'>

<table id='bcalendar'><caption  id='bcaption'>

</caption>

<!-- Table Header  -->

<thead id='bcHead'></thead>

<!-- Table Footer  -->

<!-- Table Body -->

<tbody><tr><td   id='cell1'> </td><td id='cell2'> </td><td  id='cell3'>  </td><td id='cell4'> </td><td  id='cell5'>  </td><td id='cell6'> </td><td  id='cell7'>  </td></tr>

<tr><td id='cell8'>  </td><td  id='cell9'> </td><td id='cell10'>  </td><td  id='cell11'> </td><td id='cell12'>  </td><td  id='cell13'> </td><td id='cell14'>   </td></tr>

<tr><td id='cell15'>  </td><td  id='cell16'> </td><td id='cell17'>  </td><td  id='cell18'> </td><td id='cell19'>  </td><td  id='cell20'> </td><td id='cell21'>   </td></tr>

<tr><td id='cell22'>  </td><td  id='cell23'> </td><td id='cell24'>  </td><td  id='cell25'> </td><td id='cell26'>  </td><td  id='cell27'> </td><td id='cell28'>   </td></tr>

<tr><td id='cell29'>  </td><td  id='cell30'> </td><td id='cell31'>  </td><td  id='cell32'> </td><td id='cell33'>  </td><td  id='cell34'> </td><td id='cell35'>   </td></tr>

<tr id='lastRow'><td id='cell36'>  </td><td id='cell37'>  </td></tr>

</tbody>

</table>

<table  id='bcNavigation'><tr>

<td  id='bcFootPrev'></td>

<td id='bcFootAll'></td>

<td  id='bcFootNext'></td>

</tr></table>   

<div  id='calLoadingStatus' style='display:none; text-align:center;'>

<script  type='text/javascript'>bcLoadStatus();</script>

</div>

<div  id='calendarDisplay'/>

</div>

<script   type='text/javascript'>  initCal();</script>

</b:includable>

<b:includable  id='posts' var='posts'>

<!-- posts not needed for Calendar  -->

</b:includable>

<b:includable id='menu'  var='data'>

  Configure your calendar archive widget - Edit archive widget  - Flat List - Newest first - Choose any Month/Year  Format

</b:includable>

<b:includable id='interval'  var='intervalData'>

  Configure your calendar archive widget - Edit  archive widget - Flat List - Newest first - Choose any Month/Year  Format

</b:includable>

</b:widget>

6. Find the Code

Now scroll up you blog template little bit, and find the code below (Ctrl + F):

</head>

7. Paste the script code

Now copy the script code below, and then paste it above the closing code section </head>.

 <!-- 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];

       for (var j = 0; j < entry.link.length; ++j) {

       if (entry.link[j].rel  == "alternate") { 

       var link = entry.link[j].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'></script>

8. Find the Code

Scroll up your blog template little bit, and find the code:

]]></b:skin>

9. Paste the CSS styling

Now it's time to put the CSS styling that controls the appearance (theme and colors) of Blog Calendar widget on your blog. After locating the code ]]></b:skin>, now copy the CSS styling below and then paste it above the code ]]></b:skin>.

/* Calendar 

----------------------------------------------- */

/* div that holds calendar */

#blogger_calendar { margin:5px 0 0 0;width:98%;}

/* Table Caption - Holds the Archive Select Menu */

#bcaption {border:1px solid #000;padding:2px;margin:10px 0 0;background:#1F1FFF;}

/* The Archive Select Menu */

#bcaption select {border:0px;background:#1F1FFF;color:#fff;font-weight:bold;}

/* The Heading Section */

table#bcalendar thead {background:#000;}

/* Head Entries */

table#bcalendar thead tr th  {width:20px;text-align:center;padding:2px; border:1px solid #000;  font-family:Tahoma; font-weight:bold;color:#fff;}

/* The calendar Table */

table#bcalendar {border:1px solid #000;border-top:0; margin:0px 0 0px;width:95%;background:#fff;}

/* The Cells in the Calendar */

table#bcalendar tbody tr td {text-align:center;padding:2px;border:1px solid #000;color:#1F1FFF;}

/* Links in Calendar */

table#bcalendar tbody tr td a {font-weight:bold;color:#000;}

/* First Row Empty Cells */

td.firstCell {}

/* Cells that have a day in them */

td.filledCell {}

/* Cells that are empty, after the first row */

td.emptyCell {}

/* Cells with a Link Entry in them */

td.highlightCell {background:#ddd;border:1px outset #000}

/* Table Footer Navigation */

table#bcNavigation  {width:95%;background:#1F1FFF;border:1px solid #000;border-top:0;}

table#bcNavigation a {text-decoration:none;color:#fff;}

td#bcFootPrev {width:10px;}

td#bcFootAll{text-align:center;}

td#bcFootNext {width:10px;}

ul#calendarUl {margin:5px auto 0!important;}

ul#calendarUl li a{}

10. Save the template

By pressing the Save Template button, now save the changes you've just made in your blog template. As you can see in your blog, if you have followed all the instructions above properly, it should work and appear on your blog. Anyway, you should note that this widget will not work if you have 100 articles in one month.

Troubleshooting: Why the Calendar Widget is not working on my blog?

Okay, if the Calendar widget is not working on your blog, maybe the style of Blog Archive on your blog has not been adjusted into the Flat List. To fix this, now switch the sub tab to the Page Element, and then press the Edit on the Blog Archive widget. After that, change the style of this widget to the Flat List, and Save the widget. Now you can see the result right away on your blog.

Okay, that's it for now. See you at my next articles.

Share This Article to Other People Across the World !

Del.icio.us | Reddit | Stumbleupon | Technorati |

Thanks!

Get the fresh update from Whatmakesblog.com!

Hello Bloggers,

My name is Daniel Likin and Welcome to my blog. Anyway, if you are interested to get the Newest Articles from Whatmakesblog.com, Just enter your email address in the below subscription form and then click Subscribe. In the future, you will be the first to know...

Delivered by FeedBurner

Links to this post

Daniel Likin

DanielLikin

hi john, are you the blogger behind the mobiletracker.net? why that blog has never been updated again since 2008? @jonknee 2 days ago · reply · retweet · favorite

Splinter Assassins of Persia!! @Ubisoft 10 days ago · reply · retweet · favorite

New at ProBlogger: The 5 Forgotten Keys to Extraordinary Blogging Success http://goo.gl/fb/YZrUI 10 days ago · reply · retweet · favorite

RT @problogger: Also - here's a post which contains a video that we're showing tonight in #blogforgoodpresentation http://t.co/cPufaUe 12 days ago · reply · retweet · favorite

Best iOS Games April 2011 http://toucharca.de/iu7q... 13 days ago · reply · retweet · favorite

Join the conversation

Read Users' Comments (0)

Poor Man's Technology Blog

important

Tutorials for Bloggers - WhatMakesBlog.com

Replacing the Archive Widget With Calendar Widget

Monday, December 13, 2010

Links to this post

Black and Blue Template

Subscribe Now To Get Update!

Last Posts

Daniel Likin

DanielLikin

Site Info

Blog Archive

0 Response to "important"

Post a Comment

Disclaimer

Search

We Are Hot Favorite For...

Sponsered Ads

Subscribe 2 Our Newsletter

Subscribe to Our Platforms

Best@Te-bay

Pages

Te-Bay Crew

Blog Archive

All Copyrights Reserved

Thank U..Visit Again