The archive links on my side bar is growing a bit too long. Time flies and I've been blogging for 27 months. Each month will take up 1 line. I decided to rearrange it 4 months a line using Javascript. How does it look?

---

Show how I do it:

Close
First, add in the following javascript.

<script type="text/javascript">
  var montharray=new Array("Jan","Feb","Mar","Apr",
  "May","Jun","Jul","Aug","Sep","Oct","Nov","Dec")  ;
  var aryear = 0;
  var arCurrCount = 0;
  var first = true;
  function displayArchive(arurl, arname) {
    var tmpyear = arname.substr(arname.length-4);
    if (tmpyear != aryear) {
      aryear = tmpyear;
      arCurrCount = 0;
      if (!first) {
        document.write("</table><br>");
      }else {
        first = false;
      }
      document.write("<table class=\"calendarTable\"><tr>");
      document.write("<td colspan=\"4\" class=\"calendarYr\">");
      document.write("<b>"+ aryear + "</b></td></tr>\n");
    }
    if (arCurrCount % 4 == 0) {
      if (arCurrCount != 0) {
        document.write("</tr>\n");
      }
      document.write("<tr>\n");
    }
    var currMth = arname.substr(0, 3);
    while (currMth != montharray[arCurrCount]) {
      document.write("<td class=\"calendarMth\">");
      document.write(montharray[arCurrCount] + "</td>");
      arCurrCount++;
      if (arCurrCount % 4 == 0) {
        if (arCurrCount != 0) {
          document.write("</tr>\n");
        }
        document.write("<tr>\n");
      }
    }
    document.write("<td class=\"calendarMth\">");
    document.write("<a href=\"" + arurl + "\">" + currMth + "</a>");
    document.write("</td>");
    arCurrCount++;

    var today=new Date();
    var todayy=today.getYear();
    if (todayy < 1000) {
      todayy+=1900
    }
    var todaym=today.getMonth();
    if (aryear == todayy && currMth == montharray[todaym]) {
      var tmp = 4 - (arCurrCount % 4);
      if (tmp < 4) {
        document.write("<td colspan=\""+tmp+"\"> </td>\n");
      }
      document.write("</tr></table>\n");
    }
  }
</script>

2nd, edit your display of archive to

<BloggerArchives>
<script type="text/javascript">
  displayArchive("<$BlogArchiveURL$>", "<$BlogArchiveName$>");
</script>
</BloggerArchives>

3rd, create 3 style classes named calendarTable, calendarYr and calendarMth. calendarYr is to specify how the overall table should look. eg. You can set the border and background colour.
calendarYr is to specify how the Year should look. eg. The fonts, colours, borders, background, etc.
calendarMth is similar to calendarYr, except that it is to specify how the Month should look.

eg.

<style>
.calendarYr {
  border: 0px;
  padding: 0px
  font-weight: bold;
}

.calendarMth {
  border: 0px;
  padding: 0px 6px 0px 0px;
}

.calendarTable {
  border: 1px solid #000000;
}
</style>