2007年6月3日 星期日

有Archive功能的月曆Calendar

其實一直想要有月曆的功能,可是一般是美麗的月曆網路上都找得到,例如這個Free Blog Content就提供許多美麗的Calendar,但是我想要的是一個可以索引的日曆,雖然Google Calendar也有提供這個元件,但是那個東西實在不太美觀,不怎麼想把他放到我的blog上,終於在網路上找到教學,提供一個很簡單樣式的Calendar,也可以稍微自己修改,滿符合自己的需要的。


相關教學,請參考這個網站,感恩!

Abin's Tech Note
照著以上的教學,作了一些修改,也寫下一些該注意的事項:

第一個步驟原來是要放在
<b:widget id='BlogArchive1' locked='false' title='ARCHIVED POSTS' type='BlogArchive'/>
這行後面的語法
我改成(紅字部分)
<b:widget id='BlogArchive2' locked='false' title='ARCHIVE CALENDAR' type='BlogArchive'/>
因為要id不同,那標題title也可自設成日曆或是Calendar都可以,先增加這項元素後,儲存樣板後,記得到網頁元素裡面去改’Archive’裡的設定,改成作者所提到的樣式,然後再去更動其他的程式碼會比較好一些,不然一次全改完,會發現日曆並沒有出現,還是原來的樣式,階層式的。

要放在第二的步驟,作者是說放在<head>標籤內即可,可是我放在body{ 之前就出現錯誤,雖然也是在<head>標籤內,所以正確的是應該要放在body{之後,就是定義一般元素的地方,另外定義顏色部分作者用 &sidebarcolor和&sidebartextcolor,但有些樣版這兩個元素是沒有定義的,我的就是如此,所以我就直接把顏色改成我要的就行了,例如:改成#666666 ,因為作者的樣版是黑色的,所以他的字顏色是設成#fff白色的,但因為我的是白色底的,所以用他的樣版格式,我的星期一到星期五是看不見的,所以修改了一下顏色,可以更適合自己的網頁。
改了以下幾項:
這段是敘述今天的顏色,因為我的背景是白的,所以當然就要來個有背景的顏色才能凸顯,
#CalendarTable .Today {
color: #fff;
background: #1AC300;
這段式敘述週六、週日,我改成橘色,象徵歡樂的假期啦
#CalendarTable .Weekend {
color: #FF7300;
這段就是星期一到星期五的顏色,這原來作者是設#FFF白色,我改成灰色
#Calendar .act {
color: #999999;
padding: 4px;
}

還有加上綠色的實心框線
#CalendarTable table {
border-collapse: collapse;
padding: 0px;
border: 1px #1AC300 solid;

其他的步驟,大致上都沒有什麼問題,不過發現原來的那個Archive實在太佔版面了長長的一串,只好把他刪掉了。

4 則留言:

  1. 你好,請問一下,第二步驟是貼在加入網頁元素的地方,那第三步驟是貼在哪裡呢?貼在2的後面嗎?我有去連結的網站看,試很久還是沒有,多謝解答!

    回覆刪除
  2. 他是要放 Javascript 函示,所以就放在你有放javascript的那一段就好了,我的習慣是放在〈/head〉之前。

    回覆刪除
  3. 輪太郎!
    身為電腦白痴的我,因為有你這樣的教學,讓我學會了不少呢!非常感謝喔!

    回覆刪除
  4. 不客氣,因為我也常常修模板,把自己的心得記錄下來,免得忘記,大家遇到的問題都差不多,也可以互相參考,歡迎常來。

    回覆刪除

設有留言驗證及核准,版主閱覽後,留言才會顯示,發問前請善用網站目錄Google搜尋功能