2008/09/14

(分享)(教學)將文章日期換成日曆格式

你也想把文章Titel前的日期換成「日曆格式」嗎?大王參考了良人的大秘寶[原創]以日曆的形式顯示文章日期,只用了四個步驟就將文章日期換成了日曆格式囉。

Step1.將日格式改成yyyy/mm/dd

Screenshot - 2008_9_14 , 下午 03_16_58.jpg

接著從「範本->修改Html->勾取展開小裝置範本」先將html code備份起來,才不會等等修壞了。

Step2.找到]]></b:skin>,將下面的程式碼加到]]></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; }

Step3.找到</head>,將下面程式碼加在</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>

Step4.找到下面紅色的程式碼

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

好啦,大功告成~很簡單吧^^

1 則留言:

  1. 大王您好:

    我已按照你所寫的前三個步驟
    可是第四步驟中我找不到那段紅色的部份
    請問該怎麼加入這個功能?
    謝謝!

    回覆刪除