教程 | 将 sidebar 小工具分开 (BT)

呼，有好幾天沒有更新部落格了。因為最近在忙著為我的部落格們換新的設計。目前小說部落格已經換裝完畢了，顆顆。走的是微日系風格。嗯，還不錯啦。我個人還滿喜歡的說。再來，日記部落格已經關閉了，準備換設計當中。只是有一點點卡著了，所以不會那麼快開回。加上最近換設計時的速度越來越慢，以前一天就可以完成的設計，現在會拖個好幾天。原因是一邊看戲，一邊設計。結果網速被我的戲拖慢了，乾脆關掉部落格專心看戲 (⊙o⊙)… 我的錯，我懂。

因此，教材部落格暫時不關閉先。等我把這個部落格所需的設計素材準備好之後，再來開工。哇咔咔。因為我明白，如果一連幾天把部落格關閉，可能會造成大家的不便說 << 其實你沒那麼重要 ! 好唄，我懂了 T^T 總之，最近會儘量在換設計前把教材發佈完畢說。

好了。先說這一次要發佈的教程 : 將 sidebar 小工具分開。會決定先發佈這篇教程是因為大家要求的那個置放蕾絲在 sidebar 的教程，需要到這個效果。所以我就根據順序要發佈了。發了這篇教程后，就會發佈置放蕾絲在 sidebar 的教程了。希望大家會喜歡了，敬請期待喲。

- Tutorial requested by Janice -

1. 模板 - Edit HTML

2. Ctrl + F 尋找代碼

/* Widgets
----------------------------------------------- */

3. 在這個代碼下面把以下的代碼加上去：

.sidebar .widget{
background: url(背景網址);
border: 1px solid #ccc;
padding: 10px;
}

4. 預覽看看，效果有沒有出現，或有沒有不小心刪到其他代碼，即可保存。

小解釋
紅色代碼：背景圖片的網址
紫色代碼：邊框的粗度、類型、顏色
藍色代碼：內容與邊框之間的距離

額外知識
你可以為你的 sidebar 添加更多的效果喲。例如：
# 有形狀的邊框（參考此教程）
# 內容字體有影子（參考此教程）

等等等... 你想要的效果都可以添加進去 :)