2009/06/07

將 Blogger 文章日期改成日曆樣式


看膩了 Blogger 預設的文章日期嗎?不如來使用良人的大秘寶-日曆樣式

安裝步驟
注意: 在修改範本之前一定要做備份

  • 日期格式必須為 YYYY/MM/DD
  • 進入「自訂」頁面 ->「版面配置」->「修改 HTML」>「修改範本」
<b:skin><![CDATA[]]></b:skin> 之間加入 code
.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; }


</head>後加入 code
<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>



勾取「展開修改範本小裝置範本」,找尋到這段 code
<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>


紅色那行 code ,用下列 code 取代
<div expr:id='"divCal_" + data:post.id'><script type='text/javascript'>makeCal('<data:post.id/>','<data:post.dateHeader/>');</script></div>
[參考來源]:良人的大秘寶

0 意見:

張貼留言