回到首页
订阅Luke瞎折腾
找资源前务必先看这里!!
Blogger技巧
免费空间推荐
Luke的网络收藏夹
Luke的网络硬盘
控制台
新建日志

2009/04/29

用日历形式显示Blogger中每篇文章的日期

字体大小:| |


一个来自良人的大秘寶的Blogger美化技巧,效果如上图。

要使用这个Hack首先要将Blogger的时间显示格式改为“YYYY/MM/DD”,然后再按以下步骤做:

1.控制台-布局-修改HTML,保存并备份一下模板以备不测,然后勾选“扩展窗口小部件模板

2.查找以下代码:
]]></b:skin>

在其添加下面的代码:
.CAL { background-image: url('http://klcintw.images.googlepages.com/icon-calendar.gif');
background-repeat: no-repeat; width: 32px; height: 45px; float:left;
padding-right:8px; } .MONTH { padding-top: 10px; text-align: center;
font-family: "Arial Narrow"; font-size: 9px; } .DAY { margin: -2px 0px 0px 0px;
padding: 0px; font-family: "Courier New"; font-size: 18px; font-weight: bold;
text-align: center; }


3.查找以下代码:
</head>

在其添加下面的代码
<script language="javascript" type="text/javascript" > function
makeCal(id,ymd) { var postDate = new Date(Date.parse(ymd)); var panel =
document.getElementById("divCal_"+id); panel.innerHTML = "<div class='CAL'><div
class='MONTH'>"+postDate.getFullYear()+"-"+(postDate.getMonth()+1)+"</div><div
class='DAY'>"+postDate.getDate()+"</div></div>"; } </script>


4.查找以下代码:
<div id='blog-posts'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>

将其中的红色代码替换为下面的代码:
<div expr:id='"divCal_" + data:post.id'><script type='text/javascript'>makeCal('<data:post.id/>','<data:post.dateHeader/>');</script></div>


5.保存模板,美化完成~

注:
1.你也可以把步骤2中蓝色部分的图片地址(http://klcintw.images.googlepages.com/icon-calendar.gif)换成自己喜欢的图片。
2.由于Blogger的特性显示,每日发布的所有文章只会在最新的一篇前面显示日历图案



-------------------------------------------------------------------------------------
以上图片和文字均为原创,转载请注明转自Luke瞎折腾


收藏本文
相关文章:

5 评论:

Unknown 说... 回复此评论

这个不错

Luke 说... 回复此评论

@Michael呵呵,感觉有点模仿WordPress的一些主题。

匿名 说... 回复此评论

有没有办法弄文章的阅读数

Luke 说... 回复此评论

@橙色|河蟹国目前Blogger还没有实现统计文章阅读数的功能,而相关的Hack都是在每篇文章中加入额外申请的网页计数器的代码,比较繁琐,不推荐。

我再看看吧,如果有的话,我会即时更新的。

汪洋之中的自由之岛 说... 回复此评论

博主,这个方案中,我的模板里找不到第4布的代码,一行都没有,这是什么原因,而且我用的是官方推荐的模板.....

发表评论

有问题请留言,Luke帮你解决。问了方便回答,请尽量不要匿名。