不過這裡有一個部份是關於每篇文章下方都有個回到首頁、較新的文章及較舊的文章連結,和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外觀解說