【Blogger】在文章標題前放上小日曆

用blogger最大的好處就是自由度超高，也因為自由度超高，所以久了就會忘了自己到底改了那些東西，因此，隨手做筆記是很重要的，接下來幾篇就是要記錄我的blogger到底改了那些東西！頭香就給小日曆吧！


1、務必要備份樣式檔。

2、將日期格式改為yyyy/mm/dd。

3、選取【範本】 –> 【修改html】 —> 【展開小裝置範本】 。

4、在]]></b:skin> 前加入以下的程式碼：

.CAL { background-image: url('改成你的小日曆圖片網址');

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

5、在</head>後加入以下程式碼：

<script language="javascript" type="text/javascript" >
   1:  function
   2: makeCal(id,ymd) { var postDate = new Date(Date.parse(ymd)); var panel =
   3: document.getElementById("divCal_"+id); panel.innerHTML = "<div class='CAL'><div
   4: class='MONTH'&gt;"+postDate.getFullYear()+"-"+(postDate.getMonth()+1)+"</div>&lt;div
   5: class='DAY'>"+postDate.getDate()+"</div>&lt;/div>"; } 
</script>

6、搜尋以下的程式碼。

   1: <div id='blog-posts'>

   2: <b:loop values='data:posts' var='post'>

   3: <b:if cond='data:post.dateHeader'>

   4: <h2 class='date-header'><data:post.dateHeader/></h2>

   5: </b:if>

7、用以下的程式碼取代上一步中第4行的程式碼：

<div expr:id='"divCal_" + data:post.id'><script type='text/javascript'>
   1: makeCal('<data:post.id/>','<data:post.dateHeader/>');
</script></div>

8、預覽吧！










參考資料：Fun New Run High

日曆圖片下載：點我