Loading...给blogger添加月历的方法
给blogger添加月历真是好难啊，我找了数家blogger，但可能是新版与旧版不兼容的原因，老是失败...失败...终于经过几度磨难，我尝试成功了hack，但这个hack的代价就是牺牲掉blogger自带的archieve即归档功能，如果大家觉得archieve比较好的话，还是继续用下去吧。废话不说，现在介绍如何hack的方法。
首先要说的是这个hack是从这里扒拉来的，根据教程还是出现了一些问题，现在本人把修正版附上。
进入Blogger Beta 的后台——〉点选设置中的存档，把存档频率调为“每日”——〉点选设置中的格式设置，把存档索引日期格式改为“2007-2-27”——〉点选模板中的网页元素，建立一个blog存档——〉修改blog 存档格式，勾选“先显示最旧的文章”，样式设为“平直列表”，标题可自设，比如“日历”——〉 点选修改 HTML，勾选“扩展窗口小部件模板”——〉在 <head>与 </head>之间插入一下code，我是插在css的footer样式之前的。/* Calendar Style
----------------------------------------------- */
#Calendar {
border:0px solid #222;
margin:0px;
}
#Calendar caption {
color:#946723
}
#Calendar caption a:link {
text-decoration:none;
color:#32527A
}
#Calendar caption a:visited {
text-decoration:none;
color:#32527A
}
#Calendar caption a:active {
color:#777;
text-decoration:none;
}
#Calendar caption today {
font-family:Arial;
font-weight:bold;
font-size:smaller;
}
#CalendarTable a:link, #CalendarTable a:visited {
color:#81B3E2;
text-decoration:underline;
}
#CalendarTable a:hover {
text-decoration:none;
}
#CalendarTable table {
border-collapse:collapse;
padding:0px;
border: 0px;
}
#CalendarTable table th {
font-family:Arial;
font-size:11px;
padding: 1px;
color:#777;
text-align:center;
margin: 0;
}
#CalendarTable table td {
font-family:Arial;
font-size:12px;
height:25px;
border: 0px solid #444;
color:#777;
text-align:center;
padding: 1px;
margin: 0;
}
#CalendarTable table td a {
display: block;
}
#CalendarTable .Today {
color: #fff;
background: #88f;
}
#CalendarTable .Today a {
color: #fff;
}
#CalendarTable .Lastday {
}
#Calendar .act {
color:#fff;
padding:4px;
}
在 </head>之前]]> </b:skin>之后插入一下代码。 <script type='text/javascript'>
// <![CDATA[
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("Sun","Mon","Tue","Wed","Thu","Fri","Sat");
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) + '_';
var i=7;
while (this.base.slice(i,i+1) != '.')
{
url+=this.base.slice(i,i+1);
i++
}
url+='_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();
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 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 && 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
{
out+=' <td class="Lastday">';
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 class="Lastday"> </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>
寻找到以下代码，就在“日历”小窗口的HTML中找。 <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'>
<table border='0' cellpadding='0' cellspacing='0' id='Calendar'>
<caption>
<a class='today' href='javascript:;' onclick='Calendar.GoToday();'>Today </a>
<a href='javascript:;' onclick='Calendar.PrevMonth();'>« </a>
<span id='CalendarMonth'> </span>
<a href='javascript:;' onclick='Calendar.NextMonth();'>» </a>
</caption>
<tr>
<td class='act' id='CalendarTable'> </td>
</tr>
</table>
<script type='text/javascript'>
Calendar=new ArchiveCalendar();
Calendar.base='http://arjunadreaming.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>
</b:includable>
把代码中的http://arjunadreaming.blogspot.com/改成自己的blogger地址，我一开始就是忘掉改了，结果日历出来了就是没有每日文章的链接。
最后一步保存即可。
6 comments:
2007年3月6日 14:10
你好，我按照你的方法成功添加了月历，但是每日中的链接没有显示出来。我已经将底下那个链接地址改为自己的blogger地址，日期格式也调成统一了，但是还是没有显示链接，请问你遇到类似的问题了吗？有什么好方法可以解决吗？
2007年3月7日 08:53
你好，我遇到过类似的情况，解决的办法就是把网址改称自己的blogger，你归档的频率有米改为每日，就在设置里面，再查看一下，应该是这个原因。顺便请教，留言中那个图片是怎么设置的，龙猫好Q。
2007年4月29日 11:14
求救！！！！
我按照你提供的代码进行后就是没有链接哦？我查看了相关的代码，和你的代码也是一样的呀。可是怎么就不可以呢？帮帮忙哦？！
2007年4月29日 11:25
你有没有把代码中的http://arjunadreaming.blogspot.com/改成自己的blogger地址。
2008年10月27日 11:56
需将<data:i.url/>前面一个空格去掉，不然没链接。
2009年3月12日 19:08
非常感謝!!!
发表评论