教程 | 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 后，距离顶部的距离（可以选择跟上面红色代码一样 / 加大代码）
红色代码：状态框框的宽度
紫色代码：状态框框的类型 / 粗度 / 颜色
青色代码：状态框框的形状（可参考此帖）
紫色代码：状态字体的颜色
紫色代码：状态的内容（替换成你的内容）
蓝色高亮：状态旁边图片的网址

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