2007年7月1日星期日

[分享]以日曆的形式顯示文章日期

原谅引用"Power by "良人的大秘寶"。现由WOW派整理发表!

经过了WOW派两个博客的测试,证实了其实用性与视觉效果。因此提出与大家展示分享。觉得自己有需要用得上的朋友请参照以下步骤进行修改XML代码即可。

本文已知問題:換頁(按下 Older Posts)後無法顯示日曆。

請把日期格化改成「2007/02/20」即可!


预览效果:如下

WOW派新闻频道:http://wow.mvxh.com

WOW派BSP-Hacks: http://bsphackers.blogspot.com


1.加入CSS

.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; }

2.加入JS


<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>

3.找到以下代碼

<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>
<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.allowComments'>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
</b:loop>
</div>

紅色部份代碼替換成以下代碼


<div id="&quot;divCal_" + data:post.id"><script type="text/javascript">makeCal('<data:post.id/>','<data:post.dateheader/>');</script></div>



9 评论:

Chen Bo 说...

这是第一篇非GG同学的帖子吧?哈,恭喜!

GG 说...

呵呵,庆祝一下~~

GG 说...

对应的在博客上增加了作者显示~~~谁写的一目了然~~

WOW派 说...

谢谢GG提供的机会.
我会努力的...
有问题的时候请如实指点哦.
不能让我再次出错.
哈^

Unknown 说...

WOW 还真快

加油!!!

WOW派 说...

哈……
我再不动手恐怖GG又要将我踢飞掉了
不过有支持的声音是一件很好的事情。
谢谢你们。

稀里糊涂 说...

菜鸟请问:
1.加入CSS
2.加入JS
这两批代码应该放在哪里?感谢!

稀里糊涂 说...

菜鸟请问:
1.加入CSS
2.加入JS
这两批代码应该放在哪里?感谢!

匿名 说...

Tiffany adornment has this abracadabra to accomplish you different. If you see this section of chic Frank Gehry angle bead earrings, you will be buzz the abundant adornment designers. If you abrasion this section of appearance earrings, you will like its affected appearance and accept a altered affectionate of temperament.

发表评论: ☆欢迎灌水☆言论自由☆交流快乐☆