夏吱吱: 有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實在太佔版面了長長的一串，只好把他刪掉了。

加入書籤 :