越努力越幸运。
不管如何,我比你努力,比你好,比你更问心无愧。

2017.02.22

教程 | 将 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 添加更多的效果喲。例如:
# 有形狀的邊框(參考此教程
# 內容字體有影子(參考此教程

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

7 comments:

  1. Replies
    1. 按着 keyboard 上的 Ctrl+C 拷贝代码。

      -replied by Bii.

      Delete
  2. 根本找不到 /* Widgets
    ----------------------------------------------- */ 的?

    ReplyDelete
    Replies
    1. 可能是有空行的关系,所以找不到。
      你可以试试 /* Widgets 这样 /3\

      -replied by Bii.

      Delete
  3. 有形状的边框的 code 加在那里? 上面吗?

    ReplyDelete
    Replies
    1. 一样啊,加在 {...} 里面

      -replied by Bii.

      Delete

っ 谢谢你耐心的看完这篇帖子 ♥
っ 评论将在博主审核后发布,如有不便,敬请原谅哦 :)
っ 除了评论之外,亲也可以选择在 Cbox 留言或 PM 我的部落格专页信箱

ベ 请用词确切,勿使用脏字哟
ベ 部落格不接受匿名评论,评论前请确保你拥有 Google Account 哦
ベ 请仔细列明你的问题好方便我回答哦 :)

* 感谢你的留言,欢迎下次再来。