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

2017.02.22

教程 | 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='&quot;loading&quot; + data:blog.mobileClass'> / <body>

5. 在 <body expr:class='&quot;loading&quot; + 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, 欢迎你留言在这里,我帮你看看哪里出错了。

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

16 comments:

  1. 很成功 很喜欢 谢谢你的教程:)

    ReplyDelete
  2. 谢谢你的教程,我成功了 :DD 原来blogskins 也是一样的用法 :))

    ReplyDelete
    Replies
    1. 我还没有研究到。可是如果没有错的话,BS 应该是用不到,我试过了。
      或许是 basecode 不一样,所以出来的效果不一样吧 ? :)

      -replied by Bii.

      Delete
  3. 如何把小工具放在這個 Navigator bar ?跟你一樣的 .

    ReplyDelete
    Replies
    1. 把小工具的代码添加在 *内容在这里* 就可以了啊 :)

      -replied by Bii.

      Delete
  4. 带走噜^3^只是要如何把一些小工具调到左边左边或右边右边,像你这样...
    如果你不明白的话馁,不妨到偶的blog看看,我的内容都是在中间的,左边和右边很空白...

    ReplyDelete
    Replies
    1. 不明白 /3// 你留下你的部落格网址给我。

      -replied by Bii.

      Delete
    2. http://cloey-diary.blogspot.com

      Delete
    3. 因为每个人个 screen 大小都不一样。
      而你的电脑是属于 screen 比较大的,所以会看到旁边空空。
      可是万一浏览你的部落格的那位 visitor 的电脑 screen 比较小的话,就不会看到白白的了 :)
      不知道你明不明白 /3\

      -replied by Bii.

      Delete
  5. 谢谢你的教程 :3
    请问下要怎么才能像你那样弄到分三栏的? /3\ 我的只有一栏罢了 TT

    ReplyDelete
    Replies
    1. 我的是使用 table 语法来分的。
      迟点会发布关于这个的教程。

      -replied by Bii.

      Delete
  6. 请问要怎么添加照片啊?:)
    小工具的代码又是怎么拿的呢?

    ReplyDelete
    Replies
    1. 小工具代码是指这个教程里面的代码吗 ?
      # 请使用 Ctrl+C 拷贝代码。

      添加照片
      # [img src='照片 url'/]

      PS - 请将 [] 改成 <>

      -replied by Bii.

      Delete
  7. 我想借博主你的代码来写BS的方法,可否批准?

    ReplyDelete
    Replies
    1. 很抱歉,不可以。代码是一样的,不过添加的地方不一样罢了 :)
      所以,很抱歉,不可以。

      -replied by Bii.

      Delete

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

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

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