[心得] 替你的Blogger裝上DHTML的月曆

看板Blog (部落格)作者 (eOltm)時間19年前 (2006/02/02 19:58), 編輯推噓1(100)
留言1則, 1人參與, 最新討論串1/3 (看更多)
原文在這裡 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)

02/06 02:08, , 1F
精闢詳細的分享 感謝!
02/06 02:08, 1F
文章代碼(AID): #13uVFA5P (Blog)
文章代碼(AID): #13uVFA5P (Blog)