因為我常常日子過太爽，忘記今天禮拜幾，所以想放個月曆在部落格可以提醒，可是勒，為了讓我版面不要太複雜，我就上網找秘笈，可以整合blog 存檔與月曆的功能，我搞了一個晚上終於搞定了，在此跟各位分享啦!!好康道相報
前置作業要先把
設定--->存檔--->存檔頻率，設為每日
新增網頁元素--->Blog存檔
編輯Blog存檔--->"Flat清單"、"先顯示最舊的文章"打勾、"存檔頻率"改為每日、"日期格式"改為01/09
第一步:
製作一個月曆的造型，打開範本的Html檔作修改，找出你的範本外觀設定那裏(Blogger Template Style)的下方，加入以下程式碼
/* Archive Calendar Styles */
#Calendar {
margin: 0px;
}
#CalendarTable table {
border-collapse: collapse;
padding: 0px;
border: 0px;
}
#CalendarTable table th {
padding: 1px;
color: #080808;
margin: 0;
}
#CalendarTable table td {
height: 25px;
color: #9932CC ;
text-align: center;
padding: 1px;
margin: 0;
}
#CalendarTable table td a {
display: block;
}
#CalendarTable .Today {
color: #9932CC ;
background: #63B8FF;
}
#CalendarTable .Today a {
color: #9932CC ;
}
#CalendarTable .Weekend {
color: #9932CC;
}
#Calendar .act {
color: #fff;
padding: 4px;
}
如果想改變日期的顏色請在color後方加入你想要的顏色參數，各種顏色參數請參考這裡
第二步:
設定這個月曆的運作方式，在這個html檔的<head>下面加入這串code
<script type='text/javascript'>
_uacct = "UA-2658002-1";
urchinTracker();
</script>
<script type='text/javascript'>
//<![CDATA[
<!-- Script functions for generating Archive Calendar: ArchiveCalendar(), archiveurl(), YearMonth(), Calendar(), PrevMonth(), NextMonth(), function GoToday(), refreshTable() -->
function ArchiveCalendar() {
this.PrevMonth = PrevMonth;
this.NextMonth = NextMonth;
this.GoToday = GoToday;
this.refreshTable = refreshTable;
this.YearMonth = YearMonth;
this.Calendar = Calendar;
this.archiveurl = archiveurl;
this.week_label = new Array("一","二","三","四","五","六","日");
this.month_label = new Array("01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12");
this.month_days = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
this.today = new Date();
this.cur_day = new Date();
this.blogarchivename = new Array ();
this.thisarchive = 0;
this.base = '';
}
function archiveurl(idx) {
url = this.base;
url += this.blogarchivename[idx].slice(0, 4) + '_' + this.blogarchivename[idx].slice(4, 6) + '_' + this.blogarchivename[idx].slice(6) + '_archive.html';
return url;
}
function YearMonth(date_obj) {
year = date_obj.getFullYear();
thisMonth = this.month_label[date_obj.getMonth()];
out = year+'-'+thisMonth;
return out;
}
function Calendar(date_obj)
{
year = date_obj.getFullYear();
thisDay = this.today.getDate();
thisMonth = this.month_label[date_obj.getMonth()];
nDays = this.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);
startDay = IsitNow.getDay() - 1;
if (startDay < 0) startDay = 6;
var out='';
out+='<table>';
out+='<tr>';
for (var index=0;index<7;index++)
out+='<th style="width:25px;">'+ this.week_label[index]+'</th>';
out+='</tr>';
thisarchive=0;
while (thisarchive <= this.blogarchivename.length -1)
{
if(this.blogarchivename[thisarchive].slice(0,4) == year && this.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> </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 && this.today.getMonth()==date_obj.getMonth() && this.today.getFullYear()==date_obj.getFullYear()) {
out+='<td class="Today">';
if (thisarchive < this.blogarchivename.length && this.blogarchivename[thisarchive].slice(4,6)==thisMonth && this.blogarchivename[thisarchive].slice(6,8)==archiveday) {
out+='<a href="'+this.archiveurl(thisarchive)+'" target="_top">'+index+'</a>';
thisarchive++;
}
else
out+=index;
out+='</td>';
}
else {
if (tab_col < 5)
out+='<td>';
else
out+='<td class="Weekend">';
if (thisarchive < this.blogarchivename.length && this.blogarchivename[thisarchive].slice(4,6)==thisMonth && this.blogarchivename[thisarchive].slice(6,8)==archiveday) {
out+='<a href="'+this.archiveurl(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> </td>';
}
out+='</tr>';
}
out+='</table>';
return out;
}
function PrevMonth() {
thisMonth = this.cur_day.getMonth()-1;
year = this.cur_day.getFullYear();
if (thisMonth<0) {
thisMonth = 11;
year = year-1;
}
thisMonth = this.month_label[thisMonth];
this.cur_day = new Date(year+'/'+thisMonth+'/1 00:01');
this.refreshTable();
}
function NextMonth() {
thisMonth = this.cur_day.getMonth()+1;
year = this.cur_day.getFullYear();
if (thisMonth>11) {
thisMonth = 0;
year = year+1;
}
thisMonth = this.month_label[thisMonth];
this.cur_day = new Date(year+'/'+thisMonth+'/1 00:01');
this.refreshTable();
}
function GoToday() {
this.cur_day = new Date();
this.refreshTable();
}
function refreshTable() {
document.getElementById('CalendarMonth').innerHTML = this.YearMonth(this.cur_day);
document.getElementById('CalendarTable').innerHTML = this.Calendar(this.cur_day);
}
//]]>
</script>
第三步:
利用ctrl+f去尋找這個頁面的一段code作修改，此code如下
<b:includable id='flat' var='data'>
<ul>
<b:loop values='data:data' var='i'>
<li class='archivedate'>
<a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>)
</li>
</b:loop>
</ul>
</b:includable>
以下面這段code覆蓋
<b:includable id='flat' var='data'>
<!-- Generate Archive Calendar -->
<center>
<table border='0' cellpadding='0' cellspacing='0' id='Calendar'>
<caption>
<a href='javascript:;' onclick='Calendar.PrevMonth();' title='Previous Month'><< </a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href='javascript:;' onclick='Calendar.GoToday();' title='Back to Today'> <span id='CalendarMonth'/> </a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href='javascript:;' onclick='Calendar.NextMonth();' title='Next Month'> >></a>
</caption>
<tr>
<td class='act' id='CalendarTable'> </td>
</tr>
</table>
<script type='text/javascript'>
Calendar = new ArchiveCalendar();
Calendar.base = 'http://ahsiu0217.blogspot.com/'
var offset = Calendar.base.length;
<b:loop values='data:data' var='i'>
archUrl = '<data:i.url/>'.slice(offset);
Calendar.blogarchivename.push(archUrl.slice(0,4) + archUrl.slice(5,7) + archUrl.slice(8,10));
</b:loop>
Calendar.refreshTable();
</script>
</center>
</b:includable>
上方紅色字部分請改成自己部落格的網址，如此就大功告成啦!!
感謝=Han's Blog=以及ABIN'S TECH NOTE的教學文章
1 則留言:
请问您的ARCHIVE CALENDAR第一步：
範本外觀設定那裏(Blogger Template Style)的下方：这是指哪里？
我将：
/* Archive Calendar Styles */
#Calendar {
margin: 0px;
}
略.....
这些的代码放在这行下面却无效：
BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
要把扩展窗口小部件模板打开吗？
请您告诉我是在哪一行可以吗？谢谢！
張貼留言