Blogger模版CSS語法細部介紹(下)

上次把body、header、Main、post大概介紹完了，接下來就是Sidebar、comments及footer的部份，這部份比較複雜，而且很多模版設計者都有與眾不同的樣式，所以講解起來有點困難，大概介紹基本觀念及參考的方向。

不過這裡有一個部份是關於每篇文章下方都有個回到首頁、較新的文章及較舊的文章連結，和Atom的連結，


回到首頁，預設在中間
#blog-pager {
text-align: center;
}
較新的文章，預設在左邊
#blog-pager-newer-link {
float: left;
}
較舊的文章，預設在右邊
#blog-pager-older-link {
float: right;
}
Atom的連結，就是提醒讀者訂閱RSS的按鈕，通常若有使用feedburner，這一項可以隱藏，預設在左邊
.feed-links {
text-align: left;
}
如果你不想網頁上出現這些連結，只要在裡面加上一行敘述即可，他就會隱藏了
display: none;
如果你想更改顯示位置，也是改left或是right即可，而如果你想用圖片顯示，可以參考 將Archives頁面底部的文字導向連結圖形化這篇的作法，綸太郎自己倒是沒試過。

【Sidebar】邊欄
大部分的模板為一欄式，或是兩欄式的樣式，當然比較專業的會使用到多欄式或是綜合式的邊欄，所以元素的定義名稱都不至相同。

如果你本來只有一欄，想再加入一欄可以參考(非固定式)把Blog設為三欄—Not my business一文介紹，不過由於現在三欄式的模板不像以前那麼少，建議還是從模版資源(blogger templates)裡找到一個喜歡的來用就好了，不用動手自己改。

#side-wrapper { 整個邊欄區的定義，有的會再分為sidebar1、sidebar2
#sidebar h2 { 邊欄區的標題定義
.sidebar ul li{ 邊欄的項目條目，這裡我們常會用項目符號，來讓排版美觀，可參考Blogger 新手基本技巧問答（二），
.sidebar .widget, .main .widget { 邊欄及主欄的widget格式，通常我會設與左右的距離，譬如
padding: 0 5px 0 5px; (左右都空5px)

【comments】意見區
這個在Blogger 新手基本技巧問答（三）有提到一些技巧應用，如加上圖片或是位置調整。


#comments h4 { ，這個通常會用來定義回應區標題區，就是第一行字，就是 6人發表意見，
.comment-author { 回應區作者
.comment-body { 回應區主體
.comment-footer { 通常指發表日期時間
comment-link { 張貼意見的連結
而有些模板會用
#comments-block {，也是代表回應區，因為回應區通常是一大塊，然後在後面加上相關的定義名稱，如 #comments-block .comment-author { 就是回應區的作者格式定義。

這裡我有使用作者回應會和網友回應的顏色不同的Hacks，請參考高亮显示作者评论与评论通知，他會多出.comment-body-author p { 的定義，由於是簡體中文，加上不是每個模版都適用，如果你想要這種效果，可以參考Skyvee的為 blogger 留言區(comment) 加個對話框吧!會較容易上手，不過我因為一開始就使用上述簡體版本，skyvee的還沒用過。

【footer】頁尾區
通常頁尾很簡單，我個人是不喜歡使用太複雜的元素，有的人會在將此區再劃分為三欄或是兩欄，因為想要放的小工具很多或是整個頁面的考量，先前綸太郎也有嘗試用過這種模版，但是效果並不好，一般人比較不會想要點選這裡的東西，因為滑鼠要捲到最後，照一般人的使用習慣這種版面比較不討好，不過倒是可以放些資訊型的文章供網友參考。

通常在這區我會在這裡放上版權宣告及網站相關訊息的文字，及登入Blogger後台的連結，在Blogger 新手基本技巧問答（四）一文裡有提到。

這裡通常設footer-wrapper，或是只有footer的定義，如果想要加上背景圖片，一樣是
. footer {
width: 980px;
background: #000 url("圖片網址") no-repeat;
}
有些模板你要再設height: 80px; 高度，才能將你的圖完整顯示，或是限制只出現某部份，這是要注意的地方。

而footer h2這是頁尾區網頁元素的標題定義，如果你想有標題時可自行定義內容。

這裡一樣會有 a 等文字超連結的設定顯示樣式，可以參考上篇說明。

其他還有像是
.code(程式碼區) ，顯示程式碼區域的格式，可參考[筆記]在文章裡顯示優質的程式碼區一文作法。
.blockquote(引用文章區)，引用他人文章特別顯示的格式，通常一般模板都會有blockquote定義，如果你不喜歡也可以自己設計，參考善用及改造 blogger 中的引用文字(blockquote)功能一文介紹再加以變化花樣即可。

網路上關於寫Blogger技巧與Hacks的高手非常多，有興趣的都可以利用Google加以搜尋，找到你想改頭換面的效果功能，多多參考他人的文章對自己改版也很有幫助。

因為常常換模版，也常修改模板，而且最近模板資源真的是大幅度的增加，所以建議網友們選一個適合自己需求的template，強過自己去修改模板，因為修改模板真的是很辛苦的事情，如果你仍然有興趣，還是可以慢慢試，從錯誤中學習成長，多多參考網路上的教學，至少從中學到的都是你自己的資糧。

延伸閱讀：
Blogger模版CSS語法細部介紹(上)
Blogger template模板教學課程---CSS外觀解說