越努力越幸运。
不管如何,我比你努力,比你好,比你更问心无愧。

2017.02.22

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


- 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 ♥

6 comments:

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

      - replied by Bii.

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

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

      -replied by Bii.

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

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

      -replied by Bii.

      Delete

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

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

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