Life of 97's: 教程 | Drop Down Navigator Bar (BT)

- 点击放大 -

未曾在任何部落格看过此教程，请不要擅自转载。

# 警告：此教程有些许复杂，请根据好步骤来，不然很容易就丢失整个模板。

新模板使用者（Blog Template）
1. 模板 - Edit HTML

2. Ctrl + F 寻找代码 ]]></b:skin>

3. 在 ]]></b:skin> 上面添加以下代码：

.topbar {
width: 100%;
height: 275px;
margin-top: -285px;
position: absolute;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
z-index: 100;
top: 0px;
}

.topbar:hover {
margin-top: 0px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
}

.topbar1 {
width: 100%;
background: url(背景 URL);
color: 字体颜色;
padding: 0px;
overflow: hidden;
height: 275px;
border-bottom: 10px solid #DEB887;
box-shadow: 0px 0px 5px #ccc;
}

.open {
right: 15px;
top: 285px;
position: absolute;
background: url(背景 URL);
color: 字体颜色;
width: 75px;
text-align: center;
border-radius: 0px 0px 10px 10px;
-moz-border-radius: 0px 0px 10px 10px;
}

.open o, .topbar:hover c {
display: inline;
opacity:.8;
}

.open c, .topbar:hover o {
display: none;
opacity:.8;
}

4. 添加完毕以后，Ctrl + F 寻找代码 <body expr:class='"loading" + data:blog.mobileClass'> / <body>

5. 在 <body expr:class='"loading" + data:blog.mobileClass'> / <body> 下面添加以下代码：

<div class='topbar'><div class='open'> <o>See more...</o> <c>See more...</c> </div>
<div class='topbar1'><center><br/>
内容在这里
</center>
</div></div>

6. 预览看看代码是否有出错，即可保存。

# 如果代码出错了（就是不能够 preview 你的部落格出来，请立刻删除刚刚添加的代码，不要按保存，不然将丢失所有设计，而且也不能保存）

小解释：
蓝色代码：背景图片的网址（一个是内容里面的背景，一个是 * see more * 的背景）
红色代码：内容的大小（高度）
紫色代码：边框的颜色 / 种类 / 粗度
青色代码：字体的颜色
紫色代码：See More 的宽度
褐色代码：See More 的边框类型，可参考 - 此帖 -
橙色代码：* important ! 这个是 see more 的位置。
right - 距离右边多远（可改成 left）
top - 需要根据你的内容的 height 来更改，如果你更改了我给你的 height, 请连同这个也一起更改，不然的话，就看不到你的 * See More * 了
紫色高亮：See More 出现的字（可以改成任何你想要的字）
红色高亮：内容

其他的代码你们也可以试着去更改看看，不一定要只更改我放了颜色的代码哟，或许会出现不一样的效果。

Extra Knowledge
如果你曾经使用过这篇教学 - 无连接式 navigator - ，就会知道添加在【Edit HTML】里面的代码要很小心，如果添加错了，就会 preview 不到你的部落格，所以使用这篇教学前，请你先下载多一个副本，不然保存错了代码，到时你就欲哭无泪了。

1. 分行 <br />
2. 图片 <img src='图片url' />
3. 链接 <a href='网址'>显示字体</a>

就我们常用的代码来说，也就这几个，如果你添加了另外的代码，可是出现了 error, 欢迎你留言在这里，我帮你看看哪里出错了。

# 经典模板的添加方式我还没有研究到，研究到以后会发布的哟。不好意思 :)

Categories: Bii の語法筆記, 關於小工具, 關於頁面

16 comments:

AlvaNovember 15, 2012 at 4:29 PM
很成功很喜欢谢谢你的教程:)
丁小喵November 16, 2012 at 1:30 PM
我带走咯 :) 谢谢你
# 智英November 16, 2012 at 3:57 PM
谢谢你的教程，我成功了 :DD 原来blogskins 也是一样的用法 :))
Fxckyeakc_queenNovember 22, 2012 at 4:08 PM
如何把小工具放在這個 Navigator bar ?跟你一樣的 .
家盈儿November 25, 2012 at 2:14 PM
带走噜^3^只是要如何把一些小工具调到左边左边或右边右边，像你这样...
如果你不明白的话馁，不妨到偶的blog看看，我的内容都是在中间的，左边和右边很空白...
YenEeNovember 28, 2012 at 11:12 PM
谢谢你的教程 :3
请问下要怎么才能像你那样弄到分三栏的? /3\ 我的只有一栏罢了 TT
UnknownNovember 29, 2012 at 3:31 PM
请问要怎么添加照片啊？:)
小工具的代码又是怎么拿的呢？
CeceliaDecember 24, 2013 at 10:53 AM
我想借博主你的代码来写BS的方法，可否批准？

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

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

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

教程 | Drop Down Navigator Bar (BT)

By Sheh Jing

November 15, 2012

16 comments: