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

十一月 21, 2021 | views
Comments 0
教程 | 将 sidebar 小工具分开 (BT) 呼,有好几天没有更新部落格了。因为最近在忙着为我的部落格们换新的设计。目前小说部落格已经换装完毕了,颗颗。走的是 微日系风格 。嗯,还不

教程 | 将 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 添加更多的效果哟。例如:
# 有形状的边框(参考此教程)
# 内容字体有影子(参考此教程)

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