- Before -
.jpg)
- 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 {更改二 -
width:200px;
font-family: arial;
font-size: 8px;
padding:3px;
text-shadow: 1px 1px 1px #fff;
}
<div id="in"><div class="status"><img src="http://img.juhife542d.com图片网址"><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 ♥
Categories: Bii の语法笔记, 关于小工具
好吧。那今天就继续更新吧。
虽然他才 3 岁，可是很会说话了。也很贴心，会帮忙折衣服，还会分门别类给你摆好好。我姑姑欠打的说：下要教你扫地了。Opps... 太耍宝了吧！还有这一张，有木有很像这个表情 >> 
? 有对不对，对不对？
给他有的看没得吃。噗——其实我也是说说而已。我人那么好，怎么会那么对他呢？对不？
