Blogspot教學：為文章加框線

一般Blogspot的範本，並沒有為文章加框線，只有用日期、文章標題把文章分開。如果博客一天發幾篇文章，單靠文章標題分開文章，未必夠清晰。

大家有細心留意《豆丁主義》的版面，就會發現豆丁在每篇文章加了外框。如下圖，9月14日，豆丁發了兩篇文章，都有框線把文章清楚分隔。

要加框線，有兩種方法： 方法一）使用有文章框線的範本 最簡單的方法是使用別人設定好的範本。 到「範本」，按「自訂」。

選擇「浮水印」版面，就會立刻看到文章有清晰的分隔。

簡單方法的代價是你要重新調整你的網誌版面，而且你不能選擇方框的顏色、線條等。 方法二）修改網誌的HTML碼 注意：修改HTML碼前，請先作備份！ ＞＞閱讀《美化Blogspot，備份要緊！》 請到「範本」，按「編輯HTML」。

進到HTML頁面，隨便按一下文字部分，然後按Ctrl+F，尋找。大家就會看到與中間部分都關起來了，請按數字列的黑色箭頭，開啟所有有關skin的HTML碼～

注意：由於大家使用的範本可能略有不同，HTML碼的排列也未必完全相同、使用的代碼名稱也會有所不同。（豆丁太忙了，未能幫大家找出每個範本的HTML碼，請見諒......） 豆丁使用的範本（Simple Template），內分成不同部分，我們要找 /* Posts ～

然後往下滾一點，嘗試找出 .post 部分的HTML，就會找到這樣的：

請大家在 margin行下面加入以下HTML碼（藍色字）：   border:5px #FFA62F;   border-style:solid;   border-radius:10px;   background:#FFF5EE; 豆丁來解釋一下吧：   border:5px（<--這是框線的粗幼） #FFA62F（<--這是框線的顏色）;   border-style:solid（<--這是框線的款式）;   border-radius:10px（<--這是框線的圓角有多圓）;   background:#FFF5EE（<--這是框線內文章的底色）; 顏色的HTML碼 要參考顏色的HTML碼，可到： http://www.computerhope.com/htmcolor.htm 注意：顏色碼都以「#」開始～

框線款式的HTML碼 為了方便大家選擇框線款式，豆丁把它們全列出來吧^^

solid

double

dotted

dashed

groove

ridge

inset

outset 設定距離 豆丁上面雖然加了框線，但是文章底部的灰色部分正好踏在框線上面啊！ 所以，大家想要更美觀，就要在剛才的HTML碼（藍色）後，多加這兩行（紅色）：   margin:30px 0px 30px 0px;   padding:10px 10px 10px 10px 上面的'margin'與'padding'都分別有四個數值，是順時針方向﹣﹣上、右、下、左的數值。 Margin是文章與文章之間的距離。豆丁把上、下數值定在30px，大家可以自行修改。

Padding是文章內部與框線之間的距離（紅色箭頭指着的地方）：

你看，調整padding後，灰色部分沒有再踏着框線了^^ 修改好HTML，記得儲存啊！

＞＞閱讀豆丁的其他《Blogspot教學》

============================================

感謝 西環的黃金歲月 提供以上資料

西環的黃金歲月的網誌: http://oceandeeop3000.blogspot.hk/

============================================