Blogger 新手基本技巧問答（三）

想在日期、回應欄增添些變化，加上小圖示或背景? 怎麼做。



最近都在忙其他網站的改版，所以順便也增添些圖案讓自己的blog更活潑，首先是日期的部分前面加上圖案，如下圖（這是我另一個網站的設定），用藍色框起來的圖案，找到
h2.date-header {
background:url("圖片網址") no-repeat;
}

Blogger回應的地方有兩區，一區是文章下方的post by" 0 意見"，另一區就是在展開文章後的"張貼意見"。

可以為回應區加上背景，或是在回應者前方加上圖示都可以， 針對回應區部分，先找到 /* ----- COMMENT ----- */ 這區，
是對整個回應區塊的設定，若要增添背景，可利用這行敘述
#comments {
background: url("圖片網址") no-repeat bottom right;
}
no-repeat：不重複顯示
bottom：在下方
right：在右邊

另外如下圖

綠色框起來的部分，明顯標出意見欄的圖示
/* comment-header */
#comments h4 {
background: url("圖片網址") no-repeat;
}
紅色圈起來的，放在發言者前方的圖案
.comment-author {
background:url("圖片網址") no-repeat left bottom;
}

還有每篇文章下方的資訊欄，如下圖，

找到 /* ----- POST-FOOTER ----- */
.post-footer .post-comment-link a {
background:url("圖片網址") no-repeat right;
}
記得一定要加上 right，這樣圖片在會在”意見”這兩個字的右邊。

另外這些小圖片，儘量控制在16*16的大小，#comments h4 {，這個例外，可以大一些，因為他原先一般設定的字型就比較大，如果圖片沒有完全顯示，只有顯示部分的話，就是你設定的padding太小，可以自己慢慢調，調整到完全顯示出來，或是利用line-height：1.6em; 來設定高度。

如果想改些回應區的文字敘述，例如"0意見"，改成"0 留下意見"，則可到後台，
範本→修改HTML→勾選"展開小裝置範本"， 找到"<data:top.commentlabelplural/> ”，把他置換成你想要的文字，
例如 " 留下意見"，記得前面要空一格，才能跟前面的數字0有一點距離， 會比較好看些。

系列文章:
● Blogger 新手基本技巧問答(一)
● Blogger 新手基本技巧問答(二)
● Blogger 新手基本技巧問答(四)