Tips about Blogger Archives -- drop-down menu and calendar

The calendar introduced in this article is based on client javascript, I also implement a Web service to generate calendar for you. Please check out at BlogCat, and its tutorial, the Web service is more comprehensive than the javascript version. If you donnot mind to try, you will like it.


For those 'elder' bloggers, archive lists may take up almost whole sidebar. Organizing the archive list in a drop-down menu is a good choice. It's simple, just place the following scripts in your blogger template: <select name="ArchiveMenu" onChange="location.href=this.options[this.selectedIndex].value;">
<option value="/">-------------------</option>
<BloggerArchives>
<option value="<$BlogArchiveURL$>">------<$BlogArchiveName$>------</option>
</BloggerArchives>
<option value="/">Current Posts</option>
</select>
Check out the result effect in my right panel. Before introducing bloglendar, Here is a php-based blog calendar prototype, if you are interested, please check out.


Bloglender is a script add a calendar to blogger, while we know blogger does not provide native calendar like MT, WordProcess. Its idea is simple:

1. assign a special class to DateHeader of ur blog
2. draw a calendar of current month
3. read in all elements of DataHeader class, add a hyperlink in the calendar corresponding to each DataHeader element

Thanks Ming Hong Ng, now, to add the calendar, only need to

1. copy three script files to ur server,
2. add the following codes to ur template:
   <script type="text/javascript" charset="<$BlogEncoding$>" src="[your_server]/bloglendar.js">
   </script> <script type="text/javascript" charset="<$BlogEncoding$>" src="[your_server]/bloglendar-main.js">
   </script> <link rel="stylesheet" type="text/css" href="[your_server]/bloglendar.css" />
3. enclose ur BlogDataHeader in a DIV element with class "blogDate", e.g.:
   <BlogDateHeader>
    <div class="blogDate" title="<$BlogDateHeaderDate$>"></div>
   </BlogDateHeader>
4. insert the below line to where u want the calendar appears:
   

   <span id="bloglendar"><!-- Bloglendar here --></span>

Check out effect at my blog homepage