Blogspot教學：為文章加框線

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

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

要加框線，有兩種方法：

方法一）使用有文章框線的範本

最簡單的方法是使用別人設定好的範本。

到「範本」，按「自訂」。

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

簡單方法的代價是你要重新調整你的網誌版面，而且你不能選擇方框的顏色、線條等。

方法二）修改網誌的HTML碼

注意：修改HTML碼前，請先作備份！
＞＞閱讀《美化Blogspot，備份要緊！》

請到「範本」，按「編輯HTML」。

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

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


豆丁使用的範本（Simple Template），<b:skin>內分成不同部分，我們要找 /* 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教學》