2007/07/02

三個步驟幫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>

預覽看看吧!

相關文章 :

27 comments:

莊傳魚 提到...

請問第二步驟...在??前加入下列程式碼?

Skyvee 提到...

啊, 是</head>前.. :P

星旋 提到...

真是可以啊!謝謝,這樣比較美觀多了。

但我想問那張圖片(http://klcintw.images.googlepages.com/icon-calendar.gif)是不是可以更換的?
有沒有什麼規定的?

星旋 提到...

還有,我試用一下之後,
發現如果用IE瀏覽時會有時出現「IE無法開啟網站http://novel-star.blogspot.com」等相似字樣,是我的問題嗎?但我用Firefox則沒此問題。

Skyvee 提到...

星旋你好,

圖片你可以置換成你想要的, :).

我剛用ie6,7及firefox看過你的網站, 好像沒看到什麼問題耶? 你可以舉一下例是哪裡有問題嗎?

星旋 提到...

這就是我有時遇到的情況,但我不肯定是不是我電腦顯示的問題。http://s2.simpload.com/070246891f67bc6d4.jpg

Skyvee 提到...

星旋你好,
看起來可能跟ie有點衝突, 請你把

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

這段程式碼搬到 body { 前面看看.

Scott 提到...

哈囉~感謝提供秘方,真的是好看多了呢!我的部落格 http://towardparis.blogspot.com

Skyvee 提到...

Scott
日曆色系正好跟你的blog相配呢! XD

星旋 提到...

我試過了,但還是不行。
那其實別人來我的blog會不會出現同樣的問題呢?

星旋 提到...

剛才我在想,可能是巴布的問題。
現在已移除,但還要再測試多次才可確定,
麻煩你真不好意思^^"

Skyvee 提到...

星旋你好, 你移除巴布之後, 用ie看, 還會有這問題嗎? 如果是ie衝突的問題, 別的讀者也會有相同問題哦! 就怕打不開你的網頁呢! 明天我用不同版本ie來試看看. (目前這台電腦沒裝). 請不要這麼客氣, 我們是互相交流心得呢! 我也可學習到很多.

Skyvee 提到...

星旋你好,

我測一個早上, 發現你的問題不太容易找哦! 在ie 7 下,首頁一直都是點不進去, 但是各篇文章, 卻偶而可以, 偶爾不行. 可能加入的一些script 有互相衝突到. 所以, 你也許要花些時間, 一個個檢視, 只有在ie5.5及firefox下, 才會正常運作呢!

星旋 提到...

我不太熟悉HTML等的語言,所以我想我不可能找出問題的根源了,
我還是把它移除了。
雖然好可惜,但還是等我電腦技術好一點再用,
還是非常謝謝你!^_^

Skyvee 提到...

好啊, 主要是不能影響到blog的瀏覽嘛! 有時候是否要裝這些玩意, 還是要斟酌呢! :)

monster 提到...

您好.....
我剛遵照您的指示及步驟操作
可是.....
在最後要預覽時,就出現了以下的錯誤畫面耶....
請問該如何解決呢....是那裡有問題啊?
我們無法剖析您的範本,因為它的結構不完整。 請確定所有的 XML 元素均已正確關閉。
XML 錯誤訊息: Element type "scripttype" must be followed by either attribute specifications, ">" or "/>".

Skyvee 提到...

Monster你好, 最後一個步驟的程式碼是不是有全部copy到呢? 要因為視窗上所顯示的程式碼不是完全的, 要再把下方的bar往右拉, 才會看到完整的程式碼哦

完整的程式碼如下,

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

看起來是最後的結束字元沒有 copy 到呢!

monster 提到...

skyvee您好....

繼上次改造失敗之後
沉澱了幾天
今天決定捲土重來...
哈哈哈
終於成功啦
真是開心(嘴都開心的裂到耳朵旁)
感謝大大的付出讓blog更美麗

Skyvee 提到...

Monster, 太好了! 終於成功啦!謝謝你來留言告知啊! XD

◤kahyan™◢ 提到...

很好用的程式,谢谢你~
^^

Skyvee 提到...

Kahyan, 同樣謝謝你的留言! ^^ 你的照片很有意思哦!

◤kahyan™◢ 提到...

谢谢

但是我有1个问题,就是每篇文章第1段都会和日历同1行,照片也是移位了,是不是能有什么解决方法?

Skyvee 提到...

kahyan你好, 應該是會跟標題同一列, 昨天看過你的blog, 好像很正常啊?

柳丁媽 提到...

拍謝 我又來打擾了
我的問題是 日期會跑出去日曆外面耶
例如27號的話 27這個數字就會往下掉一點點
QQ能幫我找出原因嗎QQ感謝您喔

Skyvee 提到...

柳丁媽你好, 我現在網路不太穩定, 無法測試, 是否請你先將 .DAY { margin: -2px 0px 0px 0px;
padding: 0px; font-family: "Courier New"; font-size: 18px;中的font-size 從18px, 改成16px看看?

柳丁媽 提到...

我有按照您說的把DAY { margin: -2px 0px 0px 0px;
padding: 0px; font-family: "Courier New"; font-size: 18px;中的font-size 從18px, 改成16px
不過試了以後還是不行
我就把DAY { margin: -2px 改成-6px
沒想到竟然給我矇中了ㄟ 就好了
總而言之XD真是好感謝您耶
雖然不認識您 但感覺您超熱心的
反正就是一句感謝啦^Q^

Skyvee 提到...

太好了, 柳丁媽. 的確margin也是有嫌疑的地方. 您真厲害, 自己就試出來了!也謝謝您留下這個寶貴資訊, 可以讓其他有相同狀況的網友參考.:)