自製Blogger留言欄位背景圖

和dnowba上一篇文章自製Blogger標題圖片(橫幅)一樣，自製留言欄背景圖重點不外乎了解自已的版型和css設定，當然背景設計的自我感覺也要良好，這篇稍微寫修改的要訣。(補充一下…意見欄位必須要在後台設為「內嵌式」的才可以設計背景喔)

&加入留言欄屬性的css語法：

blogger預設在留言欄位處是沒下任何的css的，但是有個觀念，css的好處就是只要是一個區塊，使用者就有自行修改該區塊所有內容的權限，我們只要知道區塊在blogger上給的名稱是什麼，就可以自已下css語法來修改他的風格。我們在後台打開html編輯器，把以下程式碼放在]]></b:skin>之前

.comment-form {
max-width: 500px;
max-height: 300px;
font-size: 14pt;
color:#000000;

background:  url(圖床位置) no-repeat ;
padding:0px 20px;
} 

行1、2：分別設定區塊的寬度和長度，這個是要配合版型和textbox(文字方塊)的長寬來決定的，如果不知道的話，可以不要設長，寬改為max-width: 100%;。
行3、4：分別設定在這個區塊中文字的大小和顏色
行5、6：分別設定圖的位置、外框距離…padding這部分蠻有趣的容我補充，padding後可下的參數可以是
padding:55px;   表示在textbox欄位外的上下左右都會留白55px
padding:20px 40px;  表示上下留白20px，左右留白40px
padding:10px 20px 30px; 表示上留10px、左右是20px、下留30px
padding:8px 6px 5px 4px; 表示上8、左6、右5、下4
當然只要下面有留白的話，還可以下padding-bottom的語法…(另外還有padding-top、padding-right、padding-left)

&修改留言欄位本身的長寬：

在為留言欄位加入背景後，會有一些調適…就是讓留言欄位本身的長寬和背景能密合。我們可以在後台修改html，找到以下程式碼，可以自已加入width的設定。

<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='5' height='410' id='comment-editor' name='comment-editor' src='' width='480'/>