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>



2 评论:

稀里糊涂 说...

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

稀里糊涂 说...

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

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