[Blogger] 讓文章日期以日曆圖顯示＋每篇文章都顯示日期

看到網路上很多人的 Blog 每篇文章前面都有個日曆模式的文章日期，一直想幫自己也加上。但是美中不足的就是：如果有一天內 Post了 2篇文章以上，第2篇文章以下總是被自動不顯示，變得不是很美觀，所以又把他移除了。

今天忙了幾個小時，總算搞定，讓每篇文章都有日曆顯示發文日期。

以下紀錄操作步驟：

Step 1.

首先先到Change Post Date Become Calender Icon 將日曆的圖案用滑鼠右鍵存檔，在找個網路空間存放。當然，也可以直接使用該網站的圖案連結，或是其他自己喜歡的圖案。

Step 2.

修改自己 Blogger 的時間格式為 月.日.年(mm.dd.yyyy)。此格式和其他參考的二篇文章不同。如下圖：（『設定』－>『格式』）

• 此步驟如果不同，在顯示日期的地方會出現錯誤。
• 也可自行修改程式碼的日期格式，來配合你的部落格日期格式，後面的程式碼中會指出修改地方。

Step 3.

再到『版面配置』－『修改HTML』－『展開小裝置複本』打勾。

Step 4.

找到 </head>，在其前面，放置下列程式碼：


<!-- 讓Blogger日期以日曆圖顯示 -->
<SCRIPT type='text/javascript'>
var PostDate;
/* 上面變數必須放在函數外面，才能將數值留到下一次被使用 */
function date_replace(date) {
if (date) { PostDate= date; }
var da = PostDate.split('.');
/* 上面的 '.' 就是在 Blogger 設定的日期格式的分隔符號，可自行調整 */
var mon = da[0], day = da[1], year = da[2];
/* mm.dd.yy 上面 [] 內的順序，就是日期格式的順序，可自行調整，從0開始 */
document.write("<div class='month'>" year "-" mon "</div><div class='day'>" day "</div>");
}
</SCRIPT>


Step 5.

找到類似下面這段語法：

h2.date-header { margin:1.5em 0 .5em; }

在其後面，放置下列程式碼：


.dateblock {
background: url("圖片網址") no-repeat;
width: 50px;
margin: 0;
font-weight: bold;
height: 50px;
float: left;
text-align: center;
}
.month {
font-size: 9px;
width: 37px;
margin: 0 2px;
color: #fff;
text-align: center;
font-family: "Arial Narrow";
}
.day {
color:#3366CC;
font-size: 19px;
width: 37px;
margin: 0 5px;
}


Step 6.

最後的步驟找到這段語法

<b:if cond='data:post.dateHeader'> <h2 class='date-header'><data:post.dateHeader/></h2> </b:if>

用以下語法取代：

<!--讓每篇文章都顯示日期-->
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'>
<div class='dateblock'><script>date_replace (&quot;<data:post.dateHeader/>&quot;);</script></div> </h2>
<b:else/>
<h2 class='date-header'>
<div class='dateblock'><script>date_replace (&quot;&quot;);</script></div>
</h2>
</b:if>


儲存之後，打完收功了。

參考文章：

1. 讓Blogger日期以日曆圖顯示
2. [Blogger/CSS]將時間形式變成日曆圖片樣式（主要操作步驟參考）
3. Change Post Date Become Calender Icon (原文及日曆圖示下載)
4. Blogger: 讓每篇文章都顯示日期| 貓盒子的筆記本

其他參考：（主要參考 年-月的CSS+Javascript 顯示部分，）

1. 以日曆的形式顯示文章日期--良人的大秘寶
2. 三個步驟幫blogger(blogspot)的文章日期換裝成日曆-calendar--Fun New Run High