三個步驟幫blogger(blogspot)的文章日期換裝成日曆-calendar

想把文章前的日期, 改成像日曆的方式呈現嗎? 參考良人的大秘寶提供的方法, 3個步驟換裝成功!

根據測試結果, 每一文章及換頁, 已無之前提到的問題, 都可以正常顯示了.





再嘮叨一下: 加入程式碼之前,先記得備分一下template.

另外,日期格式必須先改成 YYYY/MM/DD 哦! (設定-->格式)



然後,選範本-->選修改HTML-->勾取 展開小裝置範本

前置動作準備好了之後, 開始修改 html 了.

1. 在]]></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; }

2. 在</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>

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>

紅色那行程式, 用下列程式碼取代它.
<div expr:id='"divCal_" + data:post.id'><script type='text/javascript'>makeCal('<data:post.id/>','<data:post.dateHeader/>');</script></div>

預覽看看吧!

相關文章 :