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>
<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

21 comments:

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.

WCM Solutions said...

Hi!
I tried to install the Bloglendar with the use of those tips you've posted here.

But there occured a problem.
This Calendar sees only the date of a current post (which is on the same page now as the calendar). So, my previous posts are not shown.

Could you please explain it, or maybe you've faced with such a problem?

Thanks

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.

WCM Solutions said...

Thanks a lot!

I've got it!

But what I really need is the calendar which can operate with all month's dates while the blog's main page shows not the monthly posts bu one post only. It's because of the huge length of each post in my blog.

So, I suppose, I should look for something else.

Though, this calendar could be helpful for the archive pages. I'll think about it.

Regards,
Alex

i shave eggs. said...

Thanks for the archive html, it was really helpful. visit my progressing blog - www.beetlebonnet.blogspot.com.

Li-Zhao 李钊 said...

welcome, happy to see you like it

kazenotayori said...
This comment has been removed by a blog administrator.
kazenotayori said...

Thanks for the information on the calender script for Blogger. Your article is a great help for me. Now I could put the calender system to my Blogger site!

Li-Zhao 李钊 said...

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

Petersky said...

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

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


2.在BlogDateHeader?面的?明不了解意思

4.日???文章的部份?到哪??定呢?

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

thx

ちゃめ said...

Thanks a lot.
It works.

minghong said...

我是Bloglendar的作者

新的??在http://minghong.f2g.net/products/bloglendar/ (?用Firefox/Opera??)
直接下?可以用http://minghong.f2g.net/products/bloglendar/bloglendar-0.4.2.tgz

Li-Zhao 李钊 said...

thank you minghong
great to hear your update info

nata said...

THANKS A LOT. APPRECIATE IT.