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

引用”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_&quot; + data:post.id”><script type=”text/javascript”>makeCal(‘<data:post.id/>’,'<data:post.dateheader/>’);</script></div>

已知問題：換頁（按下 Older Posts）後無法顯示日曆。

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

Power by “良人的大秘寶“