Blogspot教學:為文章加框線

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

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

要加框線,有兩種方法:

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

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

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

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

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

方法二)修改網誌的HTML碼

注意:修改HTML碼前,請先作備份!
>>閱讀《美化Blogspot,備份要緊!

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

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

注意:由於大家使用的範本可能略有不同,HTML碼的排列也未必完全相同。請不要驚慌~

豆丁使用的範本,<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碼

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

soliddoubledotteddashedgrooveridgeinsetoutset

設定距離

豆丁上面雖然加了框線,但是文章底部的灰色部分正好踏在框線上面啊!

所以,大家想要更美觀,就要在剛才的HTML碼(藍色)後,多加這兩行(紅色):

margin:30px 0px 30px 0px;
padding:10px 10px 10px 10px

上面的'margin'與'padding'都分別有四個數值,是順時針方向﹣﹣上、右、下、左的數值。

Margin是文章與文章之間的距離。豆丁把上、下數值定在30px,大家可以自行修改。
Padding是文章內部與框線之間的距離(紅色箭頭指着的地方):

你看,調整padding後,灰色部分沒有再踏着框線了^^

修改好HTML,記得儲存啊!
>>閱讀豆丁的其他《Blogspot教學

如果喜歡我們的文章,請即分享到︰