真的是或别了好久的教程部落格呀，自制模板呢，还有在时不时地发布，只是这教程呀，多久没发布了，我看看啊。嗯，也还好，就 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
因为涉及更改小工具大小，代码上可能会出现错误，可以留言下大家的问题，会尽快回复 :)
Categories:
Bii の语法笔记,
自创教程,
关于小工具
.jpg)
