教程 | 特别的 hover effect

真的是或别了好久的教程部落格呀，自制模板呢，还有在时不时地发布，只是这教程呀，多久没发布了，我看看啊。嗯，也还好，就 9 个月没发布过了 orz 所以咧，今天就来发布一篇自创的教程。其实也不是没有发布过，这个效果呢，在我上一个自制模板 Black & White 里面呢，就用过了哦 XD 不过单独发布这篇教程的话，大家就不需要到模板的代码里去挖这个效果的代码了 科科

效果图如上 ▲

Blog Template 使用者

1. 布局 - 添加小工具 - HTML/JavaScript

2. 把以下代码添加进去

Blogskin 使用者

1. 模板 - edit HTML

2. Ctrl + F 寻找代码 </style>

3. 在 </style> 下面添加以下代码

.b-musicbox {
position: fixed;
top: 0px;
left: 30px;
background: #eee;
color: #000;
font-family: tinytots;
font-size: 8px;
letter-spacing: 1px;
padding: 5px;
-webkit-transition-duration: .7s;
}
.b-musicbox:hover {
margin-top: -20px;
-webkit-transition-duration: .7s;
}
.b-musicbox:hover .playbox {
top: 3px;
-webkit-transition-duration: .7s;
}
.playbox {
position: fixed;
top: -30px;
left: 34px;
width: 50px;
padding: 3px;
border: 1px solid #ccc;
background: white;
overflow-x: hidden;
z-index: 1000;
-webkit-transition-duration: .7s;
}

<div class='b-musicbox'>HOVER HERE
<div class='playbox'>内容</div>
</div>

解释会分成两个部分来说，一个是 before hover, 另一个是 after hover 哦。

小解释

 Before hover （灰色背景框）

紫色代码：小工具距离左边有多远 *改成right就会出现在部落格右手边哟

深紫代码：小工具背景色
浅蓝代码：HOVER HERE 字体颜色

蓝色代码：小工具多大，margin-top - 的号码就会越大，如果没有更改我预设的大小，这个就可以忽略喽 :)

 After hover （灰色边框）
红色高亮：框框距离 top 有多远
橙色高亮：框框距离左边有多远 *改成right就会出现在部落格右手边哟
绿色高亮：边框种类、粗度（可参考框框的种类）
蓝色高亮：框框的背景色

红色代码：小工具内的内容
绿色代码：Before hover 的内容（HOVER HERE）*可自行更改

备注：
 此款小工具适用于置放音乐播放器
 如果想要置放其他小工具，如：欢迎词等等，可自行调整小工具的大小哟 :D
 因为涉及更改小工具大小，代码上可能会出现错误，可以留言下大家的问题，会尽快回复 :)

教程 | Histat.com (BT/BS)

挥别好多天，我终于肯爬上来更新了。哦哈哟。一个字，懒。大家都见怪不怪了哦 ? 对了，前些天开放的圣诞回馈已经关闭了哦。有两位亲的订单被我删除了。抱歉，我已经声明了，该回馈只限本部落格的关注者。而你们没有关注我却跑来向我下订单，是不是有那么一米米的过分 ? 所以，我就删掉了。

言归正传，要开学了对不对 ? 我也即将迈入中四的生活了（Sweet 16 ? Maybe.）不过就我的看法来说，开学了的生活应该跟现在没差，除了要早起之外，放学后的时间我应该也是拿来上网了。教程素材会继续发，最近有在考虑，要不要开放 Ulead GIF Animator 的教程。麻烦各位亲留言给我告诉我你们的意见哦 ^*^

- Tutorial requested by Shi Hui -

Blog Template User
1. 页面 - 添加小工具 - HTML/JavaScript
2. 根据以下的步骤获得代码，再添加到你的部落格去。

Blogskin User
1. 模板 - edit HTML
2. 将你要添加此工具的位置找出来后，把获得的代码添加进去。

1. 先到 http://www.histats.com/ 注册一个账号（已经注册过的，可直接登入）

2. 如图示，点击 Add a website 添加你的部落格网址，就会到达以下页面。把所有的资料填好后，点击 Continue. *PS: 不要告诉我那几个 ang mo 字你看不懂，还要我教你怎么填资料 =v=

（点击放大）

3. 添加好后，回到主页面（Control Panel），你就会看到你添加了的部落格网址在那里，点击旁边的 Stats icon 进去。

（点击放大）

4. 点击进入后，你会发现一个现实你的部落格浏览率的页面，右手边有一个 *Counter Code*，点击进去  *PS: 对于新注册的新手，它好像是有闪下闪下吸引你的注意的 

5. 之后就点击 Add new counter, 再选择你想要的模式（Style） *PS: 本人使用的是 “ text ”

（点击放大）

6. 如图，勾选你要显示在工具里的选项（最多只能显示 3 样），然后选择你的背景色，建议为白色，当然你也可以选择配合你部落格的颜色。

7. 点击 Save 过后，点选你刚刚 create 的 counter, 即可得到该工具的代码。

教程 | Marquee Effect

话说，好几天没有更新教材了。不要问我为什么，我只会回答你一样的答案 - 懒惰 /v\ 每天都窝在四只猪锝窝里，跟另外三只猪在聊天。趁着今天那三只猪不得空上线，我赶紧来更新教程一下下 ♥ 这篇 Marquee Effect 是从旧教程区搬过来的。如果没有看过的童鞋，可以学学这个教程哦。这个教程很好用的，可以根据你自己的喜欢，用在任何地方的说 :]

- Tutorial requested by Ley Ting -

Blog Template User
1. 布局 - 添加小工具 - HTML/JavaScript

2. 把你要的 marquee effect 代码添加进去

Blogskin User
1. 模板

2. 把你要的 marquee effect 代码添加在你的 sidebar 代码里

# 效果 1 - 文字向上 / 向下移动

---

大家好。这是范例，不是饭粒

---

<marquee  behavior="scroll" direction="up / down" height="75px">内容</marquee>

# 效果 2 - 文字向左 / 向右移动

---

大家好。这是范例，不是饭粒

---

<marquee  behavior="scroll" direction="left / right" width="225px">内容</marquee>

# 效果 3 - 图片 Marquee Effect

---

---

<marquee  behavior="scroll" direction="left / right / up / down" height="75px" width="225px"><img src="图片网址"></marquee>

# 效果 4 - 图片 + 文字 Marquee Effect

---

大家好。这是范例，不是饭粒

---

<marquee  behavior="scroll" direction="left / right / up / down" height="75px" width="225px"><img src="图片网址"> 文字内容</marquee>

# 效果 5 - 有背景的 Marquee Effect

---

大家好。这是范例，不是饭粒

---

<marquee  behavior="scroll" direction="left / right / up / down" height="75px" width="225px" style="background: url(背景网址);">内容</marquee>

# 效果 6 - 鼠标指着时，停止 Marquee Effect

---

大家好。这是范例，不是饭粒

---

<marquee behavior="scroll" direction="left / right / up / down" height="75px" width="225px" onmouseout="this.start()" onmouseover="this.stop()"></marquee>

小解释
红色代码：选择一个 direction, 删掉剩下的
蓝色代码：Marquee 内容的高度 / 宽度
紫色代码：图片 / 背景网址

# 内容不仅限于文本 / 图片。任何小工具（链接 / 播放器 / 状态等）都可以自己添加的哟 :)

其实 Marquee 效果是个很容易明白的效果来的。大家其实还可以选择自己喜欢的美化代码添加进去的哟 ^-^ 以上给的例子只是基本的而已，更深入复杂的代码 / 效果，大家可以自己去研究的嗯。

教程 | 如何添加页面 (Pages)

心情那一个叫沉重啊—— 知道 PMR 成绩放榜的日期了。我完全处于惊慌的状态中。开始担心起自己的成绩了。对这次的 PMR 完全没有信心。啊啊啊，算了。先别提这件事情 ~ 部落格照常运作。大概在我去新加坡玩的那几天，我会开放一次回馈（就是制作订单的意思啦  囧''）那篇帖子会在我去新加坡的那一天自动发布哟。所以啦，有关注我的博友们，要把握机会哟。颗颗 ♥

说回这次的教程，其实「如何添加页面」，在 简单介绍新界面 这篇教程里面其实有简单介绍过了。只是貌似很多博友还不知道，所以我只好再来发布多一次。希望大家会更加明白哟。而且，我有主意到，很多博友会开 *新帖子*，然后把那新帖子当做页面在用。额，其实有可能是大家都误会了 / 故意的。没关系啦，你们喜欢就好 /3\''

- Tutorial requested by 静涵 ♥ & Kok Hui Ee -

大 家有没有发现到，图片里面的网址中间都有一个 p/xxx.html 的字眼 ? p 代表着 page 的意思。如果大家用 *新帖子* 来当成你的页面的话，当你要编辑里面的内容时，就得找出那篇帖子才能编辑。可如果大家用正确的方法来开新页面的话，就会很容易找到你们的页面来编辑了。我会使用图片来说明开新页面的方法哟。

     

点击进入【空白页面】以后，会出现跟帖子格式一模一样的页面，把你的页面标题填入，还有你的页面内容填入后，即可点击【发布】。好啦，教程就是如此的简单 ♥ 希望你们看的明白我的教程哟。喜欢的话，就点击一个 LIKE 给我吧。

相关教程：

- 添加图片页面 -

- 将页面隐藏在旁边 -

更多相关教程可查询 Tutorial 里面的页面教程。

教程 | 添加蕾丝背景在帖子 / 小工具里

很难得的，最近真的很早睡觉。不到一点 / 两点就睡了 (( 众：这个叫很早睡 ?  嗯，对我来说是的。颗颗。以前不到四点我是绝对不会上床睡觉的。现在两点不到，已经开始觉得累了，而且也没有必要跟我自己的身体过不去，还是早睡比较好。况且，我也比较早起身了、典型的早睡早起。嘻。

废话不要多说，今天来发布答应了大家的添加蕾丝背景在帖子 / 小工具里。这个教程也是蛮多人问过的，所以今天就来发布吧。希望大家会喜欢 ♥ PS : 我最近很勤劳发教程有木有 ? 颗颗。

- Tutorial requested by ms.Elnic -

添加蕾絲背景在小工具里

Layout Template (2006) User / Blog Template User
1. 模板 - edit HTML

2. Ctrl + F 尋找代碼 .sidebar .widget  {

3. 在 .sidebar .widget  {...} 裏面添加以下代碼：

background: url(背景 url) repeat-x top;

 4. 預覽看看背景有沒有出現，即可保存。

添加蕾絲背景在帖子里

Layout Template (2006) User
1. 模板 - edit HTML

2. Ctrl + F 尋找代碼 .post {

3. 在 .post {...} 裏面添加以下代碼：

background: url(背景 url) repeat-x top;

 4. 預覽看看背景有沒有出現，即可保存。

Blog Template User
1. 模板 - edit HTML

2. Ctrl + F 尋找代碼 .post-outer {

3. 在 .post-outer {...} 裏面添加以下代碼：

background: url(背景 url) repeat-x top;

 4. 預覽看看背景有沒有出現，即可保存。

小解释
红色代码：蕾丝图片的 url

# 注：请确保你的 .sidebar .widget {...} / .post {...} 代码里面的 background: xxx; 已经全部删除了，不然是看不到效果的。

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

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

教程 | 美化搜索框 (BT/BS)

这篇教程从 PMR 前拖到 holiday 之后。真的是觉得内疚死了、最近被逼着要早睡早起。托它的福，早上 11 点半我睡醒了 (( 众：这样叫很早莫 ? 对我来说那真的是很早了莫，平时是睡到两三点的。oMo 每天早上 4 / 5 点才睡，你们讲啦，想不睡到两三点都不可以 ;(

Okay, 废话太多了。这篇教程不大常看见（当然，我没有说它没有被发布过，也是有教程部落格发布过了）应该有蛮多人都不知道这篇教程吧…… ? 好啦，或许很多人都知道，可是总有一小部分的不知道，这样行了莫 >P< 好滴，废话真的不要再讲了，看教程咩。

To Miharu -
I'm so sorry that promised you to post this tutorial as soon as possible but seem like I'm didn't keep my promise. Sorry. Please forgive me :)

- Tutorial requested by Miharu -

Blog Template 使用者
1. 布局 - 添加小工具 - HTML/JavaScript

2. 将以下代码添加进去：

<center>
<form action="/search" method="get"><input type="text" name="q" value="" style="width:160px; height:19px; background:url(背景 url); color: #000000; font-size: 12px; border: 1px solid #000000;" />
<img src="图片 url" /><br /> <br />
<input type="button" value="Click to Search" style="font-size:12px; color:#000000; background: #cccccc; border:1px dashed #FFEBCD;" /></form></center>

3. 保存即可。

Blogskin 使用者
1. 模板

2. 将上面的代码添加进去你想要搜索框出现的地方。

3. 预览看看你想要的效果有没有出现，即可保存。

小解释
# 我将代码分为两个部分来解释噢。颜色代码的就是搜索框的美化代码。高亮颜色的就是搜索键的美化代码。

搜索框的美化代码
褐色代码：搜索框的高度、宽度（可以更改成你想要的高度、宽度）
橙色代码：搜索框的背景 url
红色代码：搜索框的字体颜色
蓝色代码：搜索框的字体大小
紫色代码：搜索框的边框粗度、种类、颜色
青色代码：小图标的图片 url（如果不要置放小图标，可将 <img src="图片 url" /> 删除）

搜索键的美化代码
紫色高亮：搜索键里显示的字（可更改成你喜欢的）
蓝色高亮：搜索键里字体的颜色
红色高亮：搜索键的背景色（可改成背景图）
绿色高亮：搜索键的边框粗度、种类、颜色

教程 | 迷你播放器【加强版】(BT/BS)

大家好，我又来发帖了。嘻，这一次来发一发之前你们通通在问我的那一个教程。之前发布过的 - 迷你播放器 - 不知道大家还记得吗？感觉这个播放器还蛮适合大家的胃口的，赫赫。所以今天来发布一下它的加强版，也是你们最关心的问题，就是这个播放器能不能添加多首歌曲。能！能哦。它能添加不超过 5 首歌曲哟。

教程还没有开始以前，麻烦各位读者到 - 此帖 - 看看。没有什么特别的理由，只是想把这篇帖子分享给我所有的读者。希望你们真的能明白我们这些博主的心思，不要践踏好莫 ?

Blog Template 使用者
1. 布局 - 添加小工具 - HTML / JavaScript

2. 添加以下代码：

<embed src="http://www.sheepproductions.com/billy/billy.swf?autoplay=true&f0=第一首歌的MP3网址&t0=第一首歌的歌曲名字&f1=第二首的MP3网址&t1=第二首歌的歌曲名字&total=2" quality="high" wmode="transparent" width="200" height="10" name="billy" align="middle" type="application/x-shockwave-flash" />

Blogskin 使用者
1. Ctrl+F 寻找代码 </style>

2. 将代码添加在 </style> 的下面 / 任何你想要的地方

3. 保存即可。

小解释
红色代码：歌曲的 MP3 网址（可参考此教程：如何取得 MP3 网址）
蓝色代码：歌曲的名称
紫色代码：歌曲的总数量
紫色高亮：歌曲的编号（由零开始）
紫色高亮：歌曲名称的编号（由零开始）

加强版解释
以上我给的代码呢，只是添加两首歌曲的代码。如果你想要添加更多的歌曲，就将以下代码添加在 &total 的前面：

&f1=第三 / 四 / 五首的MP3网址&t1=第三 / 四 / 五首歌的歌曲名字

如果你添加的是第三首歌曲， f1 就要改成 f2，以此类推。
如果你添加的是第三首歌曲名称， t1 就要改成 t2，以此类推。
此外、紫色代码要随着你添加的歌曲数量更改哟。

这篇可能解释得会比较混乱，如果不明白的话，记得留言给我。其实它只是一个很容易明白的道理而已，可能被我解释得乱去了 /3// 对不起。如果你不明白的话，真的要留言给我。

教程 | Slide Out Status Bar

这篇教程好像拖了 Allva 好久。Erm,, 也不知道我有没有记错，是不是 Allva 要求的。如果不是的话，麻烦通知我一声啊。歹势啊。其实这个教程吼，代码真的是我乱乱弄出来的，就算发布了，也不知道你们明白没有。囧。所以，如果要跟我拥有相同效果的亲们呢，有一些代码你们还是不要更换的好，我怕一换了，就弄不到那个效果出来了。不好意思啊。

最近可能会减少更新。Hmm, 网速真的很不给力。看戏上网不能同时一起进行 :( hurt 有时候部落格根本就是 load 到我发脾气。面书更惨，一直 refresh refresh 都不会出现首页。oMo 所以教程素材可能都会减少。对不起哟。颗颗。

- Tutorial requested by Allva -

1. 布局 - 添加小工具 - HTML/JavaScript

2. 添加以下代码：

<style type="text/css">
#stat {
padding: 3px;
width: 280px;
text-align: center;
position:fixed;
left:-250px;
top:250px;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
z-index:999;
}
#stat:hover {
top:250px;
left:10px;
}
</style>

<div style="position:fixed;">
<div id="stat">
<div class="stat"><center>
<div style='width:200px;background:#ffffff; padding: 3px; border:1px dashed #cccccc; filter:alpha(opacity=1.5); border-radius:5px; color:#000000;'><center><marquee behavior='scroll' direction='left' scrollamount='4'>状态内容</marquee></center></div>
<div style="margin-top:-30px;margin-left:250px;"><img src="图片 URL" /></div></center></div></div></div>

 3. 保存，即可。

小解释
蓝色代码：整个状态的宽度
红色代码：1 - 距离顶部的距离
                      2 - hover 后，距离顶部的距离（可以选择跟上面红色代码一样 / 加大代码）
红色代码：状态框框的宽度
紫色代码：状态框框的类型 / 粗度 / 颜色
青色代码：状态框框的形状（可参考此帖）
紫色代码：状态字体的颜色
紫色代码：状态的内容（替换成你的内容）
蓝色高亮：状态旁边图片的网址

# 劝言：各位还是不要更换那些宽度什么的会比较好哦，真的，我怕一换了，就会失去那个原本的效果了。当然，如果你坚持要换也是可以。若是真的效果走掉了，你弄不到的话，欢迎你留言给我哟。能帮的一定会帮。

教程 | Drop Down Navigator Bar (BT)

- 点击放大 -

未曾在任何部落格看过此教程，请不要擅自转载。

# 警告：此教程有些许复杂，请根据好步骤来，不然很容易就丢失整个模板。

新模板使用者（Blog Template）
1. 模板 - Edit HTML

2. Ctrl + F 寻找代码 ]]></b:skin>

3. 在 ]]></b:skin> 上面添加以下代码：

.topbar {
width: 100%;
height: 275px;
margin-top: -285px;
position: absolute;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
z-index: 100;
top: 0px;
}

.topbar:hover   {
margin-top: 0px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
}

.topbar1           {
width: 100%;
background: url(背景 URL);
color: 字体颜色;
padding: 0px;
overflow: hidden;
height: 275px;
border-bottom: 10px solid #DEB887;
box-shadow: 0px 0px 5px #ccc;
}

.open         {
right: 15px;
top: 285px;
position: absolute;
background: url(背景 URL);
color: 字体颜色;
width: 75px;
text-align: center;
border-radius: 0px 0px 10px 10px;
-moz-border-radius: 0px 0px 10px 10px;
}

.open  o, .topbar:hover c   {
display: inline;
opacity:.8;
}

.open  c, .topbar:hover o   {
display: none;
opacity:.8;
}

4. 添加完毕以后，Ctrl + F 寻找代码 <body expr:class='&quot;loading&quot; + data:blog.mobileClass'> / <body>

5. 在 <body expr:class='&quot;loading&quot; + data:blog.mobileClass'> / <body> 下面添加以下代码：

<div class='topbar'><div class='open'> <o>See more...</o> <c>See more...</c> </div>
<div class='topbar1'><center><br/>
内容在这里
</center>
</div></div>

6. 预览看看代码是否有出错，即可保存。

# 如果代码出错了（就是不能够 preview 你的部落格出来，请立刻删除刚刚添加的代码，不要按保存，不然将丢失所有设计，而且也不能保存）

小解释：
蓝色代码：背景图片的网址（一个是内容里面的背景，一个是 * see more * 的背景）
红色代码：内容的大小（高度）
紫色代码：边框的颜色 / 种类 / 粗度
青色代码：字体的颜色
紫色代码：See More 的宽度
褐色代码：See More 的边框类型，可参考 - 此帖 -
橙色代码：* important ! 这个是 see more 的位置。
                      right - 距离右边多远（可改成 left）
                      top - 需要根据你的内容的 height 来更改，如果你更改了我给你的 height, 请连同这个也一起更改，不然的话，就看                          不到你的 * See More * 了
紫色高亮：See More 出现的字（可以改成任何你想要的字）
红色高亮：内容

其他的代码你们也可以试着去更改看看，不一定要只更改我放了颜色的代码哟，或许会出现不一样的效果。

Extra Knowledge
如果你曾经使用过这篇教学 - 无连接式 navigator - ，就会知道添加在【Edit HTML】里面的代码要很小心，如果添加错了，就会 preview 不到你的部落格，所以使用这篇教学前，请你先下载多一个副本，不然保存错了代码，到时你就欲哭无泪了。

1. 分行 <br />
2. 图片 <img src='图片url' />
3. 链接 <a href='网址'>显示字体</a>

就我们常用的代码来说，也就这几个，如果你添加了另外的代码，可是出现了 error, 欢迎你留言在这里，我帮你看看哪里出错了。

# 经典模板的添加方式我还没有研究到，研究到以后会发布的哟。不好意思 :)

教程 | 美化小工具标题

亲奈的大家，我又来发教程了。嘻，是关于美化小工具标题的哟。希望这篇教程可以给大家更多的 idea 来美化你们的小工具标题。对了，最近的热门话题 —— 2006 年模板。很明显的，新界面已经去除了这个模板。只是不明白的是，为什么有些人那么喜欢跟风？就算是新模板也可以把部落格设计的很美啊。干嘛要费心思去找？为的是什么？算了，我也不要多说什么。免得被人说成无事找事来吵 /3//

好了，进入正题了哟——

- Tutorial requested by KC -

还没介绍各种类型的美化方法时，先给大家知道一下，若要美化小工具标题的话，要将代码添加在 h2 {...} 里面哟。记住了哟。

类型 1 - 为小工具标题添加分割线

text-align: center;
background: url(图片url) no-repeat left;
padding-top: 3px;
padding-left: 3px;
padding-right: 3px;
padding-bottom: 15px;

蓝色代码：分割线的图片 url
紫色代码：字体的位置（left / center / right）
紫色代码：调整数目的大小来调整你的分割线还有标题的位置

类型 2 - 为小工具添加特别的背景

background: #CCC1BA;
text-align: center;
padding: 3px;
line-height: 3px;
margin-top: 10px;
margin-bottom: 10px;
font-size: 19px;

红色代码：背景的颜色 / 图片的 url

类型 3 - 为小工具标题添加框框

background: #fecdc9;
padding: 5px;
text-align: center;
border: 2px solid #ccc;
margin-bottom: 15px;

红色代码：背景的颜色 / 也可以改成图片哟
蓝色代码：标题的位置（left / center / right）
紫色代码：边框的粗度 / 类型 / 颜色代码）
青色代码：标题距离内容的距离

类型 4 - 为小工具标题添加形状框框

background: #fecdc9;
padding: 5px;
text-align: center;
border: 2px solid #ccc;
margin-bottom: 15px;
-moz-border-radius-bottomright: 10px;
border-bottom-right-radius: 10px; 
-moz-border-radius-topleft: 10px;
border-top-left-radius: 10px;

红色代码：背景的颜色 / 也可以改成图片哟
蓝色代码：标题的位置（left / center / right）
紫色代码：边框的粗度 / 类型 / 颜色代码）
青色代码：标题距离内容的距离
橙色代码：形状框框的代码（可查询此帖）

先提供几款美化小工具标题的方法。等我再找到更多的 idea 的时候，会分享给大家哟。对了，以上提供的代码都只是针对我 capture 的图的设计提供的，当然啦，你们也可以在自己添加自己想要的效果。例如更换字体类型 / 大小 / 颜色等等等，都可以自己添加噢。希望此教程会带给你们更多的想法，码字愉快 !!

教程 | Blockquote Effect

- Tutorial requested by Pandora Angel & Elaine-

曰：

原本是不打算发布这个教程的。只是很多博友觉得这个教程很特别，很喜欢。但是，却通过 “不法” 的途径来拿这个代码。不用我说。你们都知道是什么了。很不明白，喜欢但不会弄、那就问啊。有很丢脸么？我承认，我的代码也是从 BS 学来的，这个不是叫做拷贝啊，BS 就是让你整个模板下载去用的。那为什么使用 BT 就要抄袭呢、不能问，不能自己学么？难道你们觉得偷了代码，然后弄成像是自己发现的，会比较有面子么？好心了，大家都不是没有 sense 的人，好不？算了，我还是比较看得起，不会但肯问的亲亲博友们。来，亲一个 木啊 ♥

注意：如果你已经添加过 blockquote 代码，那就直接把以下代码 {...} 里的美化代码搬去你的 blockquote 代码里，不要再添加多一次，不然就看不到效果了。

版本 I

我是版本 I。

1. 设计 → 修改 HTML

2. 添加这个代码：

blockquote {
border: 1px solid #ccc;
box-shadow: inset 0px 0 0px 0 #cccccc;
padding: 4px;
}

blockquote:hover {
border: 1px solid #ccc;
box-shadow: inset 800px 0 0px 0 #cccccc;
padding: 4px;
-webkit-transition-duration: 1.5s;
}

3. 预览看看代码有没有问题，即可保存。

版本 II

我是版本 II。

1. 设计 → 修改 HTML

2. 添加这个代码：

blockquote {
border: 1px dashed #eeeeee;
border-right: 20px solid #fecdc9;
border-left: 20px solid #fecdc9;
box-shadow: inset 0px 0 10px 0 #fecdc9;
padding: 4px;
-webkit-transition-duration: 1.5s;
border-radius: 10px;
}

blockquote:hover {
border: 1px dashed #eeeeee;
border-right: 20px solid #fecdc9;
border-left: 20px solid #fecdc9;
box-shadow: inset 0px 0 800px 0 #faafbe;
padding: 4px;
-webkit-transition-duration: 1.5s;
border-radius: 10px;
}

 3. 预览看看代码有没有问题，即可保存。

小解释
红色代码：边框的类型、粗度、颜色。
蓝色代码：鼠标划过时，出现的效果的颜色（嘿嘿，自己发掘呗、）
紫色代码：慢慢划过的那个效果的时间 *可更改
青色代码：blockquote 圆框的弧度

- 当然，如果你还想添加自己的美化代码，当然可以，我给的不过是那个效果的 basecode, 重要的还是你自己的概念、设计。所以，效果的代码我给了，其他的就由你们自己去发掘吧！如果我发现到更多特别的效果，会再在这里更新的嗯、

教程 | Miracle Image Hover (BT/BS)

- Tutorial requested by Cindy -

这是我之前设计的页面 navigator =]

Blog Template 使用者

1. 设计 → 页面元素 → 添加小工具 → HTML/JavaScript

2. 添加以下代码：

<style type="text/css">

.img-side{ 

background: #E8E6E6; 

color: #000;

width: 270px; 

height: 185px; 

margin-top:-185px;

opacity: 0; 

-webkit-transition:all .5s ease-in-out; }

.img-side:hover{

opacity:.7

}

</style>

<img src="图片网址" width="270" />

<div class="img-side"><br />

<center>

内容

</center>

</div>

3. 保存即可。

Blogskin 使用者
1. 模板 → 修改 HTML

2. 寻找代码 </style>，在 </style> 上面添加以下代码：

.img-side{
background: #E8E6E6;
color: #000;
width: 270px;
height: 185px;
margin-top:-185px;
opacity: 0;
-webkit-transition:all .5s ease-in-out; }
.img-side:hover{
opacity:.7
}

3. 之后，在你要添加小工具（此图片效果）的地方，添加以下代码：

<img src="图片网址" width="270" />
<div class="img-side"><br />
<center>
内容</center>
</div>

4. 预览看看，若没有问题，即可保存。

小解释
红色代码：hover 时背景的颜色（建议为灰色）
蓝色代码：字体的颜色（建议为黑色）
紫色代码：图片的网址
紫色代码：你要放的内容

教程 | 添加图片页面

- Tutorial requested by Kah May -

1. 设计 → 页面元素 → 添加小工具 → HTML/JavaScript

2. 添加以下代码：

<a href="页面网址1"><img src="图片网址1"></a><br>

<a href="页面网址2"><img src="图片网址2"></a><br>

<a href="页面网址3"><img src="图片网址3"></a><br>

<a href="页面网址4"><img src="图片网址4"></a><br>

3. 保存即可。

小解释
红色代码：页面的网址
蓝色代码：代表该页面的图片的网址

辅助教程：将页面挂在部落格角落
1. 设计 → 页面元素 → 添加小工具 → HTML/JavaScript

2. 添加以下代码：

<div style="top: 5px; right: 5px; position: fixed;">

<a href="页面网址1"><img src="图片网址1"></a><br>

<a href="页面网址2"><img src="图片网址2"></a><br>

<a href="页面网址3"><img src="图片网址3"></a><br>

<a href="页面网址4"><img src="图片网址4"></a><br>

</div>

3. 保存即可。

小解释
紫色代码：距离部落格顶部多远
紫色代码：距离部落格右边多远
    ▪ top / right = 右上角
    ▪ top / left = 左上角
    ▪ bottom / right = 右下角
    ▪ bottom / left = 左下角
红色代码：页面的网址
蓝色代码：代表该页面的图片的网址

教程 | 美化 textarea box (BT/BS)

- Tutorial requested by Rkang -

点击到 Links 查看详图

Blog Template 使用者
1. 设计 → 修改 HTML

2. Ctrl + F 寻找代码 ]]></b:skin>

3. 在 ]]></b:skin> 上面添加以下代码：

textarea {
border: 1px solid #000000;
background: url(背景url);
border-radius: 10px;
color: #000000;
}

4. 保存，即可。

Blogskin 使用者
1. 模板 → 修改 HTML

2. Ctrl + F 寻找代码 </style>

3. 在 </style> 上面添加以下代码：

textarea {
border: 1px solid #000000;
background: url(背景url);
border-radius: 10px;
color: #000000;
} 

4. 保存即可。

 小解释
橙色代码：边框的款式、颜色、粗度
青色代码：背景图片的网址
蓝色代码：边框的弧度
紫色代码：字体颜色

教程 | 将页面隐藏在旁边

- Tutorial requested by May & Yvonnr -

1. 设计 → 页面元素 → 添加小工具 → HTML/JavaScript

2. 添加以下代码：

<style type="text/css">

#gb{
position:fixed;
top: 50px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height: 400px;
width: 140px;
float: left;
cursor:pointer;
background:url('图片网址') no-repeat;
}

.gbcontent{
float:left;
border: 1px solid #666666;
background: #ffffff;
padding:10px;
}
</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 150-w) : moveGB(170-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">

内容在这里

<div style="text-align:right">
<a href="javascript:showHideGB()">
[close]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (140-gb.offsetWidth).toString() + "px";
</script>

3. 保存即可。

小解释
蓝色代码：小工具距离部落格顶部多远
紫色代码：小工具内容的边框类型、粗度、颜色等
紫色代码：小工具内容的背景色
红色代码：小工具的内容
青色代码：显示 Close button 的字

附注：
其实，这个小工具不止可以添加页面，也可以添加 ChatBox、播放器、你要写的留言等等等。看你有没有创意、够不够大胆而已。

教程 | 特别的 Status Bar (BT/BS)

- Before -

- After -

Blog Template 使用者

类型 ① - Bar type Status

1. 设计 → 修改 HTML

2. Ctrl + F 寻找代码 ]]></b:skin>

3. 在 ]]></b:skin> 上面添加以下代码：

#context{

position: fixed;

left: 40px;

top: 80px;

background: #fff; 

color: #888;

padding: 5px;

opacity:0;

overflow: hidden;

text-align: justify;

-webkit-transition: .5s;

-moz-transition: .5s

}

.status{

text-align: center;

width: 200px;

background: #fecdc9;  

border: 1px dotted #eee;

font: 8px arial;

padding: 3px;

opacity: 0.6; 

text-shadow: 1px 1px 1px #fff;

}

.status:hover #context{

-webkit-transition:width .2s,height .5s .2s,opacity .5s;

opacity: .8;

left: 40px;

width: 190px;

height: 50px;

}

#in{

position: fixed;

left: 35px;

top: 60px;

}

小解释

紫色代码：内容的位置（距离左边）

紫色代码：内容的位置（距离上边）

紫色代码：内容背景色

紫色代码：内容字体颜色

蓝色代码：Status Bar 的位置（center / left / right）

蓝色代码：Status Bar 的宽度

蓝色代码：Status Bar 的背景色

蓝色代码：Status Bar 边框的种类、颜色、粗度

蓝色代码：Status Bar 的字体大小、类型

红色代码：Hover 时内容的位置（距离左边）

红色代码：Hover 时内容的宽度

红色代码：Hover 时内容的高度

青色代码：Hover 时内容的位置（距离上边）*若将 status bar 往下移，px 会变大

4. 保存起来。到设计 → 页面元素 → 添加小工具 → HTML/JavaScript

5. 添加以下代码：

<div id="in">

<div class="status">Status Here.

<div id="context">

<div style="font-family: arial; font-size:8px; color: #757575;">

内容

</div>

</div></div></div>

小解释

紫色代码：Status Bar 里显示的字（图片）

紫色代码：内容的字体类型

紫色代码：内容的字体大小

紫色代码：内容的字体颜色

紫色代码：内容显示的字

类型 ② - Image type Status

注：步骤完全一样，只是一些代码需要修改，例子：将教程 ① 的.status 改成以下的代码。
更改一 -

.status {
width:200px;
font-family: arial;
font-size: 8px;
padding:3px;
text-shadow: 1px 1px 1px #fff;
}

更改二 -

<div id="in">

<div class="status"><img src="图片网址">

<div id="context">

<div style="font-family: arial; font-size:8px; color: #757575;">

内容

</div>

</div></div></div>

Blogskin 使用者
1. 模板 → 修改 HTML

2. Ctrl + F 寻找代码 </style>, 然后将以下代码加入：

#context{
position: fixed;
left: 40px;
top: 80px;
background: #fff;
color: #888;
padding: 5px;
opacity:0;
overflow: hidden;
text-align: justify;
-webkit-transition: .5s;
-moz-transition: .5s
}
.status{
text-align: center;
width: 200px;
background: #fecdc9;
border: 1px dotted #eee;
font: 8px arial;
padding: 3px;
opacity: 0.6;
text-shadow: 1px 1px 1px #fff;
}
.status:hover #context{
-webkit-transition:width .2s,height .5s .2s,opacity .5s;
opacity: .8;
left: 40px;
width: 190px;
height: 50px;
}
#in{
position: fixed;
left: 35px;
top: 60px;
}

3. 然后在 <body> 下面，添加以下代码：

<div id="in">
<div class="status">Status Here.<div id="context">
<div style="font-family: arial; font-size:8px; color: #757575;">
内容</div>
</div></div></div>

注：Image Type Status 于 BS 者来说，是一样的步骤 =]

曰：
这个教程对于新手来说，或许有点复杂。其实仔细的去学的话，很简单而已。还有，另外那些美化的代码可以自己添加，不一定要跟着原本的，可以自己美化起来。如有任何不明白，欢迎你留言，我会尽量帮你的。Kamsa ♥

教程 | 无链接式 navigator (BS)

1. 模板 → 修改 HTML

2. Ctrl+F 寻找代码 <style type="text/css">

3. 将以下代码添加在 <style type="text/css"> 的上面：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
 //
//When you click on a link with class of poplight and the href starts with a #
$('a.poplight[href^=#]').click(function() {
    var popID = $(this).attr('rel'); //Get Popup Name
    var popURL = $(this).attr('href'); //Get Popup href to define size
    //Pull Query & Variables from href URL
    var query= popURL.split('?');
    var dim= query[1].split('&');
    var popWidth = dim[0].split('=')[1]; //Gets the first query string value
    //Fade in the Popup and add close button
    $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a style="outline: none; background-color: #fff;" href="#" class="close"></a>');
    //Define margin for center alignment (vertical   horizontal) - we add 80px to the height/width to accomodate for the padding  and border width defined in the css
    var popMargTop = ($('#' + popID).height() - 80) / 2;
    var popMargLeft = ($('#' + popID).width() + 80) / 2;
    //Apply Margin to Popup
    $('#' + popID).css({
        'margin-top' : -popMargTop,
        'margin-left' : -popMargLeft
    });
    //Fade in Background
    $('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
    $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'}) is used to fix the IE Bug on fading transparencies
    return false;
});
//Close Popups and Fade Layer
$('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...
    $('#fade , .popup_block').fadeOut(function() {
        $('#fade, a.close').remove();  //fade them both out
    });
    return false;
});

});
</script>

 4. Ctrl + F 寻找代码 </style>

5. 将以下代码添加在 </style> 的上面：

#fade { /*--Transparent background layer--*/
 display: none; /*--hidden by default--*/
 background: #000;
 position: fixed; left: 0; top: 0;
 width: 100%; height: 100%;
 opacity: .50;
 z-index: 9999;
}
.popup_block{
 display: none; /*--hidden by default--*/
 background: #fff;
 padding: 20px;
 border: 15px solid #FFE5A8;
 float: left;
 font-size: 13px;
 position: fixed;
 top: 50%; left: 50%;
 z-index: 99999;
 /*--CSS3 Box Shadows--*/
 -webkit-box-shadow: 0px 0px 20px #fff;
 -moz-box-shadow: 0px 0px 20px #fff;
 box-shadow: 0px 0px 20px #fff;
 /*--CSS3 Rounded Corners--*/
 -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
 border-radius: 10px;
}
img.btn_close {
 float: right;
 margin: -25px -25px 0 0;
}
/*--Making IE6 Understand Fixed Positioning--*/
*html #fade {
 position: absolute;
}
*html .popup_block {
 position: absolute;
}

红色代码：页面的背景色

蓝色代码：页面边框代码

紫色代码：页面字体大小

注意：以下的步骤因每个人使用的 BS basecode 不一样，所以不方便告诉大家要将代码添加在那里。

6. 将以下的代码添加在你要小工具出现的地方：

<a class='poplight' href='#?w=500' rel='1'>页面名称 1</a>

7. 之后，将以下代码添加到 <body> / <body oncontextmenu='return false;'> 下面：

<div class='popup_block' id='1'>  

内容在这里。

</div>

红色代码：页面的代号（注：很重要）

紫色代码：页面的名称（显示在博客）

蓝色代码：页面里面的内容（可更改）

8. 预览一下，即可保存。

小解释

一、为什么我说页面的代号很重要？

当你要你某个页面出现某个内容时，页面的代号一定要一样。

就是说，rel='1' 的页面，会出现 <div class='popup_block' id='1'> 的内容。

当然，如果你不要用 '1' 来做代号，你也可以用其他的字，例如：a / b / c / girl / boy 等。

自己容易找就好。

二、如果你要添加多个页面时，就将 ⑦ 的代码拷贝多一次，po 在同一个地方，不过，你的 rel='1' 一定要换成另外一个代码，不然就会出现一样的内容。

例：

<center>

<a class='poplight' href='#?w=500' rel='cutie'>页面名称 1</a>

</center>

<center>

<a class='poplight' href='#?w=500' rel='beautiful'>页面名称 1</a>

</center>

---

<div class='popup_block' id='cutie'>

内容在这里。

</div>

<div class='popup_block' id='beautiful'>

内容在这里。

</div>

三、如果你要以图片的方式来取代页面的名称，就添加以下的代码：

<a class='poplight' href='#?w=500' rel='1'><img src="图片 url" /></a>

Extra knowledge

在 修改HTML 里面，一些代码是很正式的，跟我们平时添加的代码不一样哦、看以下的例子：

1. 分行 <br/>

2. 图片 <img src='图片 url'/> 

相关文章：

- 无链接式 navigator (BT) -