Creamy.

教程 | 特别的 Status Bar (BT/BS)

By


- Before -

- 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 改成以下的代码。
更改一 -
.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="图片网址">
<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: ,

September 6, 2012

6 comments:

  1. 可芊 ♥October 21, 2012 at 4:00 PM

    我没有< body >耶...

    ReplyDelete
    Replies
    1. Sheh JingOctober 21, 2012 at 4:27 PM

      每個人使用的 BS 代碼都不一樣。[body] 是每一個 BS 底代碼常用的，或許你的 basecode 使用的不是 [body], 所以你要自己找找你的代碼是什麽嘍 :)

      - replied by Bii.

      Delete
  2. Jacklyn Qi .November 11, 2012 at 4:34 PM

    失败了 -,-
    他并没有在左上角 ! = =

    ReplyDelete
    Replies
    1. Sheh JingNovember 11, 2012 at 11:27 PM

      此教程教程并没有问题. 应该是你添加代码的时候出错了. 请删除所有的代码, 再添加一次 :)

      -replied by Bii.

      Delete
  3. jiajiaDecember 6, 2012 at 9:18 PM

    为什么我在 ]]>上面放代码凡是都是无效?
    这次也是不管是什么代码都好全部无效 Q------Q

    ReplyDelete
    Replies
    1. Sheh JingDecember 6, 2012 at 10:44 PM

      有可能是你之前添加的代码不小心删了一些关键性的、
      我并不能确切的告诉你，毕竟我不知道你的代码是什么。

      -replied by Bii.

      Delete

っ 谢谢你耐心的看完这篇帖子 ♥
っ 评论将在博主审核后发布，如有不便，敬请原谅哦 :)
っ 除了评论之外，亲也可以选择在 Cbox 留言或 PM 我的部落格专页信箱

ベ 请用词确切，勿使用脏字哟
ベ 部落格不接受匿名评论，评论前请确保你拥有 Google Account 哦
ベ 请仔细列明你的问题好方便我回答哦 :)

* 感谢你的留言，欢迎下次再来。

Subscribe to: Post Comments (Atom)