作者timpanii (eOltm)
看板Blog
標題[心得] 替你的Blogger裝上DHTML的月曆
時間Thu Feb 2 20:28:31 2006
原文在這裡
http://ecmanaut.blogspot.com/2005/08/adding-calendar-navigation-to-your.html
可以順便看一下他的月曆, 不過他還有另外改寫過一點
這裡有另外一個沒改寫過的
http://zenzhao.blogspot.com/
優點:
. 一個很漂亮的月曆(可自己更換skin)
. 重點是DHTML的部分寫的很好, 可以直接選擇月份和年份
(滑鼠在月曆上面的"<"或者">"按鈕上面押住就可選擇)
缺點:
. 必須更動你的文章以及archive的日期格式, 還有你archive的頻率
. 一定要找一個可以儲放網頁的地方(如學校提供的網頁空間)
. 要加上去實在是 太 麻 煩 了
請先確定你對Blogger的Template每個標籤在作什麼有一定的了解
==
我大概翻譯一下, 如果你的Blogger介面是中文, 請自己對應一下.
強烈建議先把你的template存到文字檔案上面來編輯
1. 首先到
http://www.dynarch.com/projects/calendar/
下載calendar的包裝, 解壓縮到你自己的網頁空間
假設放在
http://www.example.com/jscalendar-1.0/
2. 在</head>前插入以下四行, 記得改路徑
比如說你放在
http://www.exmaple.com/jscalendar-1.0, 那你就必須把底下的PATH
改成
http://www.example.com/jscalendar-1.0
<style type="text/css">@import url("PATH/skins/aqua/theme.css");</style>
<script type="text/javascript" src="PATH/calendar.js"></script>
<script type="text/javascript" src="PATH/lang/calendar-en.js"></script>
<script type="text/javascript" src="PATH/calendar-setup.js"></scrip>
3. 在你要放月曆的地方加入一個空的div
<div id="calendar-container"></div>
以後月曆就會插在這裡
你可以先在這個div後面插入以下這段, 強迫月曆現形(但是目前沒有任何用處)
看完以後就可以刪掉底下這段了
<script type="text/javascript"><!--
Calendar.setup( {flat:'calendar-container'} );
//--></script>
4. 在你的blogger的Settings -> Archiving -> Archive Frequency
把archive的頻率改成"Daily", 儲存
Settings -> Formatting -> Archive Index Date Format
把這個日期改成 YYYY-MM-DD的形式
順便再改Date Header Format, 一樣改成YYYY-MM-DD, 然後儲存
記得republish
5. 在你原本放Archive列表(一般人通常按月份來排)的地方 應該有一段長的像
<BloggerArchives>
<li><a href="<$BlogArchiveURL$>"><$BlogArchiveName$></a></li>
</BloggerArchives>
(按: 因為有的人喜歡月份越新的擺越前面, 所以自己用JavaScript改寫了這段,
請改回來, 或改成像是上面這樣, 不然月曆抓不到...)
然後這段的外面應該是以 <MainOrArchivePage></MainOrArchivePage>包起來
把這兩個標籤以<div id="archive"></div>取代
6. 在</head>之前插入原文網頁上落落長的一串JavaScript
(因為太長了, 這裡就不列出來了)
最後是在<body>上面加上 onload="calendar" 屬性
7. 完工, 把你的template放上Blogger然後republish吧
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 140.114.80.17
※ 編輯: timpanii 來自: 140.114.80.17 (02/02 20:33)
1F：推 carls:精闢詳細的分享 感謝！ 02/06 02:08