山海经

效果图如上 ▲

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