教程 | 特别的 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
 因为涉及更改小工具大小，代码上可能会出现错误，可以留言下大家的问题，会尽快回复 :)

教程 | 帖子内容简约法 (BT)

这个教程是关于怎么缩短你的帖子内容部分哦，也就是说，如果你每次的帖子都是好长一篇，可是又不想让部落格看起来很杂乱，可以选择这个方式来简约你的帖子内容哦 :) 如果还是不明白我的意思，可以尝试把效果使用在自己的部落格哟 :D

- Tutorial requested by Lo Wei Meng -

Blog Template 使用者
1. 模板 - 修改 HTML

2. Ctrl + F 寻找代码 .post-body {

3. 在 .post-body { 下面添加以下代码：

height: 400px;
overflow-y: auto;

4. 点击 preview 查看效果，如无问题，即可保存。

小解释
蓝色代码：帖子的高度 *可自行调整

-

我真的很久很久没有发布教程了，一直要怎么用词我必须一直翻之前的教程来看 orz :(

教程 | 添加特别的链接 - 图片 (BT/BS)

Tadaaaaa :D 我回来了，顺便替教程部落格换了一个新设计哦。然后，部落格也关闭了两天，不知道有木有造成大家的不方便，有的话，博主先在这里说声 paiseh 哈 :P 设计换了，只是留言信箱暂时还没放上去，然后其实还有一些很细节的地方我还没有改设计 (eg. 帖子留言) Orz. 我只是大概把设计改了就把部落格给开放了（为了不造成大家的麻烦 TAT 然后就先这样吧，现在来发布一下教程哦 ^ ^

- Tutorial requested by Lo Wei Meng -

Blog Template 使用者 / Blogskin 使用者
1. 模板 - 修改 HTML

2. Ctrl + F 寻找代码 a:link {

3. 在 a:link { 下面添加以下代码：

-webkit-background-clip:text;
-webkit-text-fill-color: transparent;
background-image: url(图片url);
background-position: 33% 56%;

4. 点击 preview 查看效果，没有问题即可保存。

小解释
红色代码：图片的 url
蓝色代码：图片的位置

教程 | Blockquote 简约法

米娜桑们，我回来了。话说距离上次的更新，应该是两个月前了（汗）奇迹的是，两个月里依旧有亲们在 Cbox 留言，我还以为大家都忘了这个部落格呢。相较之下，我的日记部落格倒是更新的比较频繁 XD 教程部落格就... 大家心知了哈 xP

Okay. 废话不多说，这次要 po 的教程就是 Blockquote 简约法。相信有经验的博客都应该懂得如何简约 Blockquote. 但同时也有一些博客新手不懂得什么是 Blockquote 简约法。好的，现在就来小小解释一下。简约法就是呢，把一些内容很长的 Blockquote 缩短成可以用 scrollbar 来 view 的内容。当然，如果你还是不明白的话，可以建议你在实验部落格尝试一下效果哟 =]

- Tutorial requested by Lynn -

* 适用于 BT / BS

Blog Template / Blogskin User
1. Ctrl + F 寻找代码 blockquote { 以及 blockquote:hover {

2. 然后在 {...} 里面添加以下代码：

height: 300px;
overflow-y: auto;

3. 点击 preview 预览后，方可保存。

小解释
蓝色代码：blockquote 的高度 *可更改

# 高度可更改为自己想要的，但要注意的是，内容要多过你设下的高度才会出现 scrollbar 来简约。如果内容的长度 < 设下的 height，blockquote 跟平常看起来就会一样 :)

注：
- 要在 blockquote { & blockquote:hover { 里添加相同的代码
- blockquote 出现的 scrollbar 样式会与部落格的一样，教程可参考：点击

教程 | Navigator Style 1 (BT/BS)

超超超超久违的教程 :) 带着新设计低调的回归。整个 2013 就过去了三分之一了说、即使压力再多也好，心情再烂也好，日子还不是一样得过。这个世界不会因为你一个人的心情不好、压力很大而停止运转，所以，倒不如重拾欢笑，开开心心地过每一天。♥

言归正传，这次更新的教程：Navigator Style. 就是我们常说的页面效果啦。这次分享的教程呢，效果是自创的。其实这个教程是有瑕疵的，就是只适合用在单色背景。或者熟悉代码的大家，可以把效果的 basecode 拿去慢慢研究的哟，不过记得 CR 我就是了 :>

Blog Template User
1. 页面 - 添加小工具 - HTML/JavaScript
2. 把以下的代码添加进去

Blogskin User
1. 模板 - edit HTML
2. Ctrl + F 寻找代码 </style>
3. 在 </style> 的下面添加以下代码

<style>
#navi1 {
width: 100px;
height: 10px;
color: #fff;
margin-left: -111px;
-webkit-transition-duration: .7s;
padding: 10px;
padding-right: 25px;
background: 背景色/url;
border: 1px dashed #888;
-moz-border-radius-bottomright: 20px;
border-bottom-right-radius: 20px;
-moz-border-radius-topright: 20px;
border-top-right-radius: 20px;
}
#navi1:hover {
width: 100px;
height: 10px;
padding: 10px;
padding-right: 25px;
color: #fff;
margin-left: 0px;
-webkit-transition-duration: .7s;
background: 背景色/url;
border: 1px dashed #fff;
-moz-border-radius-bottomright: 20px;
border-bottom-right-radius: 20px;
-moz-border-radius-topright: 20px;
border-top-right-radius: 20px;
}
#nav1 {
font-family: arial;
text-transform: uppercase;
height:12px;
background: url(背景url);
color: #fff;
-webkit-transition-duration: .7s;
border: 1px dashed #888;
}
#nav1:hover{
font-family: arial;
text-transform: uppercase;
height:43px;
background: url(背景url);
color: #888;
-webkit-transition-duration: .7s;
border: 1px dashed #888;
}
</style>
<div style="top:60%; left:1px; position:fixed;">
<div id="navi1">
<div id="nav1"><center><span style="text-shadow:1px 1px 1px #ccc;"><a href="页面链接">页面名称</a></span><br /><br />页面简介</center>
</div></div>
<br /><br />
<div id="navi1">
<div id="nav1"><center><span style="text-shadow:1px 1px 1px #ccc;"><a href="页面链接">页面名称</a></span><br /><br />页面简介</center>
</div></div>
<br /><br />
<div id="navi1">
<div id="nav1"><center><span style="text-shadow:1px 1px 1px #ccc;"><a href="页面链接">页面名称</a></span><br /><br />页面简介</center>
</div></div>
</div>

小解释
红色代码：背景的颜色代码 or 网址
蓝色代码：页面位置 *可自行更改
紫色代码：页面链接
橙色代码：页面名称 *示例图 - HOME
靛色代码：页面简介 *示例图 - BACK TO HOME

# 号外号外：其实我没有 color 起来的代码也可以自己更换，毕竟 basecode 给了你们，要更改起来就比较容易。

PS : 求对新设计的留言啊啊啊啊 :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 效果是个很容易明白的效果来的。大家其实还可以选择自己喜欢的美化代码添加进去的哟 ^-^ 以上给的例子只是基本的而已，更深入复杂的代码 / 效果，大家可以自己去研究的嗯。

教程 | 帖子标题旁添加图片 (BT/Layout)

安哟哈色哟 -v- 趁着去旅行之前，会尽量把大家之前要求的教程发布出来。Hmm, 这一次发布的教程还算蛮特别的。在其他部落格也有看过同样的 effect, 可是没有人发布过，所以这次我就来发布啦  LOL 很无聊的开场白。各位有看过我之前设计的博友们就会知道是怎样的了，而且我使用后，大家也有留言在 Chatbox 问如何用。干脆我就发布教程好了。

其实我想说，如果你那么不爽我、我的部落格、我发的素材、我发的教程、我的为人、我的待人处事方式，那我麻烦你，不要用本部落格发布的教材 please! 我还真的是没有看过一个像你这样要委屈自己的人诶。明明讨厌我，还要用我发布的东西 = = 还有，下次麻烦你有礼貌一点。我转载的素材，你拿走不留言我当做看不到，反正我也是转载来的。但是，我自制的素材就麻烦你留言，让我知道我的素材的去向都好。尼玛。

- Tutorial requested by Yuen Thing -

* 使用前请注意：由于这个教程是从代码下手，所以大家有可能不小心删掉一些代码，那样会造成模板不能保存。建议大家在预览效果图后才保存，以免发生不必要的错误。

Blog Template User / Layout Template User ( 2006 年模板 )

1. 模板 - Edit HTML - 在 扩展窗口小部件模板 打勾

2. Ctrl + F 寻找代码 <h3 class='post-title entry-title' itemprop='name'> 

3. 在 <h3 class='post-title entry-title' itemprop='name'> 上面添加以下代码：

<img src='图片 url' align='left' width='60' style='padding:3px; border: 1px dashed #ccc; margin-top:-8px;'/>

4. 预览看看你的代码有没有出错才保存。（不要直接保存，以免出现代码错误等情况却无法得知）

小解释

蓝色代码：图片的网址 * 建议使用正方形的图案为佳
紫色代码：图片的位置 * 可改成 left / right
青色代码：图片的宽度 * 60 / 70 为佳  当然你们可以自己喜欢
橙色代码：图片的边框粗度 / 类型 / 颜色

# 再一次提醒，保存代码之前先预览看看模板有没有出现问题。一旦发现模板不能保存（出现问题的意思），请立刻把添加的代码删除。

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

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

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

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

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

     

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

相关教程：

- 添加图片页面 -

- 将页面隐藏在旁边 -

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

教程 | 更换部落格背景 (BT/BS)

大家好。此帖子乃新设计后的第一篇帖子。不用怀疑啦，你没有进错部落格说。这一次我比较大胆一点，尝试挑战灰白色来设计我的部落格。各位，如何 ? 欢迎你们留言告诉我啦。话说，navigator bar 是我研究到最辛苦的那一部分 /.\ 不知道为什么，每次弄部落格，最辛苦完成的总是 navigator 那一 part. 囧'' 再来，就是 header 的 banner 了。这个真的很乱来，噗—— 伤害到你们弱小的眼睛就对不起了。颗颗、

好啦。废话哈拉完了。这次来发布，如何更换部落格背景这篇帖子。感觉最近新进的部落格玩家还不少。可是他们通常遇到的基本问题就是换部落格背景。我不知道为什么，或许是对代码还陌生的关系吧 ? 或许看了这篇帖子就没有那么混乱了 ? (( 众 : 有那莫什么莫 ?

其实我先前已经有发布过两种更换背景的方法了：点 点 这两种方法都是不一样的，而且更换的背景类型也不一样。详情可以点击网址进入查看。而今天发布的，则是比较全面一点的，把统统更换的类型 / 方法聚集在这个帖子里面，不用麻烦、颗颗。

Blog Template and Blogskin Users

1. 模板 - edit HTML

2. Ctrl + F 寻找代码 body {

3. 把 body { 里面的 background: $(body.background); 的代码删除，如图：

4. 删除后，再添加一段 background 的代码。

# 下面会提供几种背景的类型，还有其添加方法。只需把代码添加在 body {...} 里面就可以了。

- 类型 1 ; 重复性背景图 -

background: url(背景网址);

- 类型 2 ; 横铺式背景图 -

background: url(背景网址) repeat-x;

- 类型 3 ; 直铺式背景图 -

background: url(背景网址) repeat-y;

- 类型 4 ; 角落式背景图 -

background: url(背景网址) no-repeat left bottom;

# 

left bottom : 左下角

left top : 左上角

right bottom: 右下角

right top : 右上角

#

暂时就只有这四种类型的背景还有它的添加方法（外加前两次发布的）。希望这些教程可以帮到你们哟 :D

教程 | Youtube 播放器【简易版】 (BT/BS)

嘿嘿，终于有时间上来更新教程了。之前忙着替我的日记部落格换衣服，所以把时间都用在那里，以至于没空来更新部落格说。真的是不好意思啊啊啊啊、这几天应该会比较有空。因为我的 Running Man 已经看完了 T^T 日记 / 小说部落格的设计也完毕了。只剩下教程部落格。或许会给教程部落格来个灰白风格。Hmm, 还不知道，还没有决定好 << 太懒惰了。

废话不要多说，这次来发布简易版的 YouTube 播放器。这个 YouTube 播放器的好处就是容易找歌曲，只要上 Youtube.com，search 你要的歌曲，就可以了。而坏处就是，只能放一首歌曲。如果大家嫌要找 MP3 网址很麻烦的话，不妨试用这一个播放器哟。

- Tutorial requested by Miko 佑佑 -

Blog Template User

将播放器添加在小工具里
1. 布局 - 添加小工具 - HTML/JavaScript

2. 把以下代码加入：

<object width="25" height="25"><param name="movie" value="http://www.youtube.com/v/后面的代码?version=2&amp;autoplay=1&amp;loop=1&amp;color1=ffffff&amp;color2=ffffff" /><embed src="http://www.youtube.com/v/后面的代码?version=2&autoplay=1&loop=1&color1=ffffff&color2=ffffff" type="application/x-shockwave-flash" width="25" height="25"></embed></object>

 3. 保存即可。

将播放器添加在部落格角落
1. 步骤如上。

2. 添加以下代码：

<a style="display:scroll; position:fixed;bottom:0px; left:0px;" ><object width="25" height="25"><param name="movie" value="http://www.youtube.com/v/后面的代码?version=2&amp;autoplay=1&amp;loop=1&amp;color1=ffffff&amp;color2=ffffff" /><embed src="http://www.youtube.com/v/后面的代码?version=2&autoplay=1&loop=1&color1=ffffff&color2=ffffff" type="application/x-shockwave-flash" width="25" height="25"></embed></object></a>

3. 保存即可。

Blogskin User

将播放器添加在小工具里
1. 模板

2. 寻找你的 sidebar 的代码（每个人的代码都不一样，所以无法准确的告诉你们该添加在哪里）

3. 在 sidebar 代码里添加以下的代码：

<object width="25" height="25"><param name="movie" value="http://www.youtube.com/v/后面的代码?version=2&amp;autoplay=1&amp;loop=1&amp;color1=ffffff&amp;color2=ffffff" /><embed src="http://www.youtube.com/v/后面的代码?version=2&autoplay=1&loop=1&color1=ffffff&color2=ffffff" type="application/x-shockwave-flash" width="25" height="25"></embed></object>

4. 预览查看播放器有没有出现，即可保存。

将播放器添加在部落格角落
1. 模板

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

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

<a style="display:scroll; position:fixed;bottom:0px; left:0px;" ><object width="25" height="25"><param name="movie" value="http://www.youtube.com/v/后面的代码?version=2&amp;autoplay=1&amp;loop=1&amp;color1=ffffff&amp;color2=ffffff" /><embed src="http://www.youtube.com/v/后面的代码?version=2&autoplay=1&loop=1&color1=ffffff&color2=ffffff" type="application/x-shockwave-flash" width="25" height="25"></embed></object></a>

4. 预览查看播放器有没有出现，即可保存。

小解释
红色代码：YouTube 歌曲的代码
蓝色代码：播放器边框的颜色
紫色代码：播放器背景的颜色
青色代码：播放器位置的代码（bottom left : 右下角 以此类推）

---

如何取得 YouTube 歌曲的代码

1. 登入 http://www.youtube.com/

2. 搜寻你要的歌曲，例：我爱他 丁当

3. 你会进到你搜寻的歌曲的网站，如图：

- 点击图片放大 -

4. 如图示，拷贝网址中 v= 后面的代码来取代红色代码就可以了。

教程 | 添加整体部落格 Facebook 赞 (BT/BS)

才几天没有上来更新，部落格的浏览率直接呈直线下滑。囧" 大家竟然这么对待我 T^T 算了，今天就来更新一篇教程呗。对了，这篇教程我貌似拖了 N 个月才肯来发布。真的是对不起 Miiko 了 (( 鞠躬 或许很多人都在其他的部落格看过这篇教程，可是我还是意思意思一下，来发布。毕竟也有可能其他的博友们还不懂得。

另外一提的是，不要再 inbox 任何关于部落格的问题去我的个人 FB 账号了。任何问题请到专页留言。还有还有，很重要的一点，如果我没有发布过 X 教程 / 其他博主发布的 Y 教程出现了问题，请你们请你们 !! 不要问我。真的，我没有发布就代表我没有研究。甚至于，你问我如果你没有发布，为什么你在你的部落格用 Z 效果。亲爱的你们，我也是从其他博主那里学来的，而且我也把网址给了你们，任何问题就去问发布教程的博主啊。找我有什么用 ? 更甚的是，我不认为那位博主发布的教程有问题，因为我本身就用到了，为什么你用不到 ==?

- Tutorial requested by Miiko -

Blog Template 使用者

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

2. 添加以下代码：

<iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://www.facebook.com/plugins/like.php?href=你的博客网址&amp;send=false&amp;layout=standard&amp;width=267&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font&amp;height=80" style="border-bottom-style: none; border-color: initial; border-left-style: none; border-right-style: none; border-top-style: none; border-width: initial; height: 80px; overflow-x: hidden; overflow-y: hidden; width: 267px;"></iframe>

3. 保存即可。

Blogskin 使用者

1. 模板 → 修改 HTML

2. 将代码添加在你要添加的地方：

<iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://www.facebook.com/plugins/like.php?href=你的博客网址&amp;send=false&amp;layout=standard&amp;width=267&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font&amp;height=80" style="border-bottom-style: none; border-color: initial; border-left-style: none; border-right-style: none; border-top-style: none; border-width: initial; height: 80px; overflow-x: hidden; overflow-y: hidden; width: 267px;"></iframe>

3. 预览看看，保存即可。

小解释
红色代码：你的部落格网址

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

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

废话不要多说，今天来发布答应了大家的添加蕾丝背景在帖子 / 小工具里。这个教程也是蛮多人问过的，所以今天就来发布吧。希望大家会喜欢 ♥ 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 的图的设计提供的，当然啦，你们也可以在自己添加自己想要的效果。例如更换字体类型 / 大小 / 颜色等等等，都可以自己添加噢。希望此教程会带给你们更多的想法，码字愉快 !!

教程 | 框框的种类

先欠着我最爱的 KC 那篇教程先。来发这一篇新手入门的教程呗。或许很多人都会了，但是也有可能一小部分还不会的。所以就先发了这篇教程，这样的话，明天的教程会容易的多了。不然我很难解释说 /3//

框框的种类

bii babey

Solid

bii babey

Dashed

bii babey

Dotted

bii babey

Double

bii babey

Groove

bii babey

Ridge

bii babey

Inset

bii babey

Outset
  框框的形状

bii babey

-moz-border-radius: 1em 4em 1em 4em;
border-radius: 1em 4em 1em 4em;

bii babey

-moz-border-radius-bottomright: 10px;
border-bottom-right-radius: 10px;

bii babey

-moz-border-radius: 25px 10px / 10px 25px;
border-radius: 25px 10px / 10px 25px;

bii babey

-moz-border-radius-bottomright: 5px 10px;
border-bottom-right-radius: 5px 10px;

bii babey

-moz-border-radius-bottomright: 10px 5px;
border-bottom-right-radius: 10px 5px;

bii babey

-moz-border-radius: 35px;
border-radius: 35px;

bii babey

-moz-border-radius-bottomright: 10px;
border-bottom-right-radius: 10px;
-moz-border-radius-topright: 10px;
border-top-right-radius: 10px;

bii babey

-moz-border-radius-bottomright: 10px;
border-bottom-right-radius: 10px;
-moz-border-radius-topleft: 10px;
border-top-left-radius: 10px;

bii babey

-moz-border-radius-topright: 10px;
border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
border-top-left-radius: 10px;