Loading Blog Search...

Sunday, October 10, 2004

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>
<option value="<$BlogArchiveURL$>">------<$BlogArchiveName$>------</option>
<option value="/">Current Posts</option>

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.:
     <div class="blogDate" title="<$BlogDateHeaderDate$>"></div>
  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


minghong said...

Good to see someone who like that simple script. Enjoy! :-)

Li-Zhao 李钊 said...

:-D, you r the owner, highly appreciate your excellent work.

Li-Zhao 李钊 said...

Yea, I agree that this is a problem. If you know it is only a javascript running on your current webpage, you will know this problem cannot be solved by it.

However, for the objectives of providing a calendar for monthly archives, this is not a problem. As in the archive pages, all posts in the same month will be listed.

Li-Zhao 李钊 said...

welcome, happy to see you like it

Li-Zhao 李钊 said...

happy to see it's useful. :-) welcome

petersky said...

你的?站好??喔! 我是?好在找 Blogger 日?的?候 不小心????面?到你的?站 也?考了你的一些?料 ?不起 因?你有?明中文名字 所以我才打中文 因?我的英文程度很低
?於Blogger而言我只是?新手 由於日?的做法我也?考了好???站 可是仍然做不出? 不知道究竟少了哪?步? ??李钊大哥指?一下 :

1.我?你指定的三??案放在 bloglendar?料??面 然後用ftp上?到我的空? 然後?下列放在head?面



5.不知李钊大哥可否?一篇中文的完整教??程 ?更多?人受惠呢? 因??一套真的挺?用的! 感激不?!!

John said...

Thanks for the drop-down menu code!! Much appreciated!!

John said...
This comment has been removed by a blog administrator.
Li-Zhao 李钊 said...

john, u r welcome

Annee said...

Thank you very much for the bloglendar code!!! I really appreciate it~ It's very easy to install.

Li-Zhao 李钊 said...

welcome annee

v74 said...

your drop-down menu code is cool


Raizo TANAKA said...

Thanks a lot.
It works.

minghong said...


新的??在http://minghong.f2g.net/products/bloglendar/ (?用Firefox/Opera??)

Li-Zhao 李钊 said...

thank you minghong
great to hear your update info

Anonymous said...