Translate: 简体 繁體 English
Related Posts Widget for Blogs by LinkWithin

《文章列表》

教學 (30) 新聞 (8) 遊戲 (11) 網摘 (7) 影音 (9) 影視 (6) 聯播 (5) Blog (23) CPBL (8) Diary (31) Dog (1) EeePC (2) Extension (6) Firefox (8) Life (24) NBA (8) Plurk (3) Programming (2) Security (11) Service (13) Software (16) Tweets (41) Wrestling (1)
Tag:Blog、教學

7月 30, 2006

[教學] 在Blogger中加入日曆功能!
Tag:Blog、教學

有網友E-Mail問我TonyChou Walker中的日曆功能該怎麼用?(其實可以在本Blog上留言問就好了...)這是個很好的問題~所以我在這裡介紹一下這個程式,其實這個"很棒"的好用日曆是在 笨蛋壩子的隨筆 中挖到的"",我之前曾經用過一個比較"陽春"的日曆,叫做 Bloglendar,由於功能"無法符合"我的需求,沒有月份切換的功能所以就沒用了,除此之外還有一個更棒、更華麗的月曆可以在 ecmanaut 看到~但是似乎"有點"耗資源,不夠簡單、大方?所以我並沒有用,有興趣的可以試看看!

重點來了!本站使用的日曆主要分成三個部份:CSS、JavaScript、Sidebar顯示處...只要將這些語法"依照以下步驟"複製後貼在Blogger Template中"適當位置"就可以了...

一、CSS:
/* Calendar v0.3 */
#Calendar {
border:1px solid #222;
margin:0px;
}
#Calendar caption {
Font-Family:'trebuchet ms', helvetica, arial, sans-serif;
font-weight: bold;
color:#fff;
}
#Calendar caption a:link, #Calendar caption a:visited, #Calendar caption a:hover, #Calendar caption a:active {
color:#777;
text-decoration:none;
}
#Calendar caption today{
font-weight:light;
font-size:smaller;
}
#CalendarTable a:link, #Calendar a:visited, #Calendar a:active{
text-decoration:none;
font-weight:bold;
Text-decoration:underline;
color: #fff;
}
#CalendarTable a:hover {
color: #AADD99;
text-decoration:none;
}
#CalendarTable table {
border-collapse:collapse;
padding:0px;
border: 0px;
}
#CalendarTable table th {
font-family:Arial;
font-size:13px;
padding: 1px;
color:#777;
margin: 0;
}
#CalendarTable table td {
font-family:Arial;
font-size:13px;
width:25px;
height:25px;
border: 1px solid #444;
color:#777;
text-align:center;
padding: 1px;
margin: 0;
}
#CalendarTable table td a {
display: block;
}
#CalendarTable .Today {
background: #444;
color: #00AAFF;
}
#CalendarTable .Today a {
}
#CalendarTable .Lastday {
}
#Calendar .act {
color:#000;
padding:4px;
}
以上的CSS部份完全是以本站為例,是"黑色"背景為底的,請"自行調整"以配合自己的版面配色為主...通常CSS的設定部份是在Template中的"<style>"標籤之中...

二、JavaScript:
<!-- Calendar v0.3 Begin -->
<script language="javascript" type="text/javascript">
var week_label = new Array("Sun","Mon","Tue","Wed","Thu","Fri","Sat");
var month_label = new Array("01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12");
var month_days = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);

var today = new Date();
var cur_day = new Date();

var blogarchivename = new Array ();
var blogarchiveurl = new Array ();
var thisarchive = 0;

<BloggerArchives>
blogarchivename.push("<$BlogArchiveName$>");
blogarchiveurl.push("<$BlogArchiveURL$>");
</BloggerArchives>


for (var x in blogarchivename)
{
blogarchivename[x] = blogarchivename[x].slice(0,4) + blogarchivename[x].slice(5,7) +blogarchivename[x].slice(8);
}

function YearMonth(date_obj)
{
year = date_obj.getFullYear();
thisMonth = month_label[date_obj.getMonth()];
out = year+'-'+thisMonth;
return out;
}

function Calendar(date_obj)
{
year = date_obj.getFullYear();
thisDay = today.getDate();
thisMonth = month_label[date_obj.getMonth()];

nDays = month_days[date_obj.getMonth()];
if (date_obj.getMonth() == 1 &&(((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0)))
{
nDays = 29;
}

IsitNow = date_obj;
IsitNow.setDate(1);
//get the day of the week (0~6)
startDay = IsitNow.getDay();
var out='';
out+='<table>';
out+='<tr>';
for (var index=0;index<7;index++)
{
out+='<th>'+week_label[index]+'</th>';
}
out+='</tr>';

thisarchive=0;
while (thisarchive <= blogarchivename.length -1)
{
if(blogarchivename[thisarchive].slice(0,4) == year && blogarchivename[thisarchive].slice(4,6) == thisMonth)
{
break;
}
else
{
thisarchive++;
}
}

var tab_col=0;

for (index=0;index<startDay;index++)
{
if (tab_col==0) out+='<tr>';
out+='<td class="Lastday"> </td>';
tab_col++;
}

var archiveday
for (index=1;index<=nDays;index++)
{
if (index<10)
{
index_day = new Date(year+'/'+thisMonth+'/0'+index+' 00:01');
archiveday = '0' + index;
}
else
{
index_day = new Date(year+'/'+thisMonth+'/'+index+' 00:01');
archiveday = index;
}

if (tab_col==0)
{
out+='<tr>';
}
if (index==thisDay && today.getMonth()==date_obj.getMonth() && today.getFullYear()==date_obj.getFullYear())
{
out+='<td class="Today">';
if (thisarchive < blogarchivename.length && blogarchivename[thisarchive].slice(4,6)==thisMonth &amp;& blogarchivename[thisarchive].slice(6,8)==archiveday)
{
out+='<a href="'+blogarchiveurl[thisarchive]+'" target="_top">'+index+'</a>';
thisarchive++;
}
else
{
out+=index;
}
out+='</td>';
}
else
{
out+='<td class="Lastday">';
if (thisarchive < blogarchivename.length && blogarchivename[thisarchive].slice(4,6)==thisMonth &amp;& blogarchivename[thisarchive].slice(6,8)==archiveday)
{
out+='<a href="'+blogarchiveurl[thisarchive]+'" target="_top">'+index+'</a>';
thisarchive++;
}
else
{
out+=index;
}
out+='</td>';
}

if (tab_col==6)
{
out+='</tr>';
tab_col=0;
}
else
{
tab_col++;
}
}

if (tab_col>0)
{
for (var si=0;si<(7-tab_col);si++)
{
out+='<td class="Lastday"> </td>';
}
out+='</tr>';
}
out+='</table>';
return out;
}

function PrevMonth()
{
thisMonth = cur_day.getMonth()-1;
year = cur_day.getFullYear();
if (thisMonth<0)
{
thisMonth = 11;
year = year-1;
}
thisMonth = month_label[thisMonth];
cur_day = new Date(year+'/'+thisMonth+'/1 00:01');
refreshTable();
}

function NextMonth()
{
thisMonth = cur_day.getMonth()+1;
year = cur_day.getFullYear();
if (thisMonth>11)
{
thisMonth = 0;
year = year+1;
}
thisMonth = month_label[thisMonth];
cur_day = new Date(year+'/'+thisMonth+'/1 00:01');
refreshTable();
}

function GoToday()
{
cur_day = new Date();
refreshTable();
}

function refreshTable()
{
document.getElementById('CalendarMonth').innerHTML = YearMonth(cur_day);
document.getElementById('CalendarTable').innerHTML = Calendar(cur_day);
}
</script>
<!-- Calendar v0.3 End -->
以上JavaScript最大的關鍵之處就是"紅色"的部份,重點是有兩個地方必須先至Blogger的管理介面去設定:
  1. 設定 --> 格式 -->「把索引日期格式存檔」設定為 「2006-07-30」
  2. 設定 --> 存檔 -->「存檔頻率」設定為「每日」
通常JavaScript加入的部份是在Template中的"</head>"標籤之前即可!

三、Sidebar顯示處:
<table border="0" align="center" cellpadding="0" cellspacing="0" id="Calendar">
<caption>
<a href="javascript:;" class="today" onClick="GoToday();" style="color:#00FF00;">Today</a>
<a class="other" href="javascript:;" onClick="PrevMonth();" style="color:#FFFF00;">&laquo;</a>
<span id="CalendarMonth" style="background: #444;"></span>
<a class="other" href="javascript:;" onClick="NextMonth();" style="color:#FFFF00;">&raquo;</a>
</caption>
<tr>
<td class="act" id="CalendarTable"></td>
</tr>
</table>
<script type="text/javascript">
refreshTable();
</script>

<div style="text-align:center;">
Archives:<select onchange="document.location.href=this.options[this.selectedIndex].value;">
<BloggerArchives>
<option value="<$BlogArchiveURL$>"><$BlogArchiveName$></option>
</BloggerArchives>
</select>
</div>
其中"紅色"的部份代表"下拉式選單",其實並不重要~可以不用加入,基本上照著以上的步驟就可以替Blogger加上日曆功能了!如果有任何問題歡迎提出來,也可以參考一下延伸閱讀中的相關資料~
延伸閱讀:
  1. 笨蛋壩子的隨筆: 在Blogger上安插月曆( Calendar)
  2. 笨蛋壩子的隨筆: 微調在 blogger 上的月曆
  3. Petersky's Place: 為 Blogger 加上 Bloglendar
  4. ecmanaut: Adding calendar navigation to your Blogger template
Technorati Tags: ,

相關文章:

4 意見:

匿名 提到...

請問您怎麼在banner中加入flicker的照片阿?

Nike小周 提到...

你可以先參閱 這兒 有Flickr Badge的教學...
如果要在Banner顯示成符合自己版面樣式話必須要自行修改CSS喔...
你可以自行參考本站的原始碼,有問題歡迎再提出來~

carole 提到...

請問一個笨問題,我實在不知道什麼是sidebar顯示處,還是在BLOGGER範本>修改HTML嗎?還是在網頁元素中藥新增HTML/JAVASCRIPT?對不起我只看得懂你網頁說明。真是不好意思。

張貼留言

《關於我自己》

《最新回應》

《熱門文章》

BloggerAds廣告讀取中 ...