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

2017.02.22

教程 | 无链接式 Navigator (BT)


- Tutorial requested by 113 & Angel -

目前没有在任何教程部落格看到这个教程,
请不要转载此教程。谢谢。

(若看不清图片,请点击部落格右方的 About / Color Codes / Links 查看效果)

注:此教程很复杂,请确保你跟着每一个步骤来做,不然就看不到效果了。

For Blog Template User

1. 设计 → 修改 HTML

2. Ctrl+F 寻找代码 <head>

3. 在 <head> 的后面添加以下代码:
<style type='text/css'>
#fade { /*--Transparent background layer--*/
 display: none; /*--hidden by default--*/
 background: #000;
 position: fixed; left: 0; top: 0;
 width: 100%; height: 100%;
 opacity: .50;
 z-index: 9999;
}
.popup_block{
 display: none; /*--hidden by default--*/
 background: #fff;
 padding: 20px;
 border: 15px solid #FFE5A8;
 float: left;
 font-size: 13px;
 position: fixed;
 top: 50%; left: 50%;
 z-index: 99999;
 /*--CSS3 Box Shadows--*/
 -webkit-box-shadow: 0px 0px 20px #fff;
 -moz-box-shadow: 0px 0px 20px #fff;
 box-shadow: 0px 0px 20px #fff;
 /*--CSS3 Rounded Corners--*/
 -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
 border-radius: 10px;
}
img.btn_close {
 float: right;
 margin: -25px -25px 0 0;
}
/*--Making IE6 Understand Fixed Positioning--*/
*html #fade {
 position: absolute;
}
*html .popup_block {
 position: absolute;
}
</style>
红色代码:页面的背景色
蓝色代码:页面边框代码
紫色代码:页面字体大小

4. 保存。之后再到 设计 → 页面元素 → 添加小工具 → HTML / JavaScript

5. 添加以下的代码:
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

<script>
$(document).ready(function() {
//When you click on a link with class of poplight and the href starts with a #
$('a.poplight[href^=#]').click(function() {
var popID = $(this).attr('rel'); //Get Popup Name
var popURL = $(this).attr('href'); //Get Popup href to define size

//Pull Query & Variables from href URL
var query= popURL.split('?');
var dim= query[1].split('&');
var popWidth = dim[0].split('=')[1]; //Gets the first query string value

//Fade in the Popup and add close button
$('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="图片 url" class="btn_close" title="Close Window" alt="Close" /></a>');

//Define margin for center alignment (vertical horizontal) - we add 80px to the height/width to accomodate for the padding and border width defined in the css
var popMargTop = ($('#' + popID).height() + 80) / 2;
var popMargLeft = ($('#' + popID).width() + 80) / 2;

//Apply Margin to Popup
$('#' + popID).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});

//Fade in Background
$('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'}) is used to fix the IE Bug on fading transparencies

return false;
});

//Close Popups and Fade Layer
$('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...
$('#fade , .popup_block').fadeOut(function() {
$('#fade, a.close').remove(); //fade them both out
});
return false;
});
});
</script> 
红色代码:叉叉的图片代码

6. 保存。然后再 添加小工具 → HTML / JavaScript

7. 添加以下代码:
<center>
<a class='poplight' href='#?w=500' rel='1'>页面名称 1</a>
</center>
8. 保存。到 设计 → 修改 HTML

9. Ctrl+F 寻找代码 <body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

10. 在 <body expr:class='&quot;loading&quot; + data:blog.mobileClass'> 之后添加以下代码:
<div class='popup_block' id='1'>  
内容在这里。
</div>
红色代码:页面的代号(注:很重要)
紫色代码:页面的名称(显示在博客)
蓝色代码:页面里面的内容(可更改)

小解释
一、为什么我说页面的代号很重要?
当你要你某个页面出现某个内容时,页面的代号一定要一样。

就是说,rel='1' 的页面,会出现 <div class='popup_block' id='1'> 的内容。

当然,如果你不要用 '1' 来做代号,你也可以用其他的字,例如:a / b / c / girl / boy 等。
自己容易找就好。

二、如果你要添加多个页面时,就将 ⑦ 的代码拷贝多一次,po 在同一个地方,不过,你的 rel='1' 一定要换成另外一个代码,不然就会出现一样的内容。

例:
<center>
<a class='poplight' href='#?w=500' rel='cutie'>页面名称 1</a>
</center>

<center>
<a class='poplight' href='#?w=500' rel='beautiful'>页面名称 1</a>
</center>

---

<div class='popup_block' id='cutie'>
内容在这里。
</div>

<div class='popup_block' id='beautiful'>
内容在这里。
</div>


三、如果你要以图片的方式来取代页面的名称,就添加以下的代码:
<a class='poplight' href='#?w=500' rel='1'><img src="图片 url" /></a> 

Extra knowledge
在 修改HTML 里面,一些代码是很正式的,跟我们平时添加的代码不一样哦、看以下的例子:

1. 分行 <br/>
2. 图片 <img src='图片 url'/>

其实也就这两个(就我们要添加的代码来说),若还有其他的,会再发布在这里。

* 每一次要保存时,建议先 ‘预览’ 看看,有时候你添加错了代码,又保存了的话,就很难找回那个代码了。所以,先 ‘预览’,看代码有没有出错,才来保存。:)

45 comments:

  1. 找不到 《body expr:class='"loading" + data:blog.mobileClass'》 @@ 怎麼辦 ><

    ReplyDelete
  2. 找不到 《body expr:class='"loading" + data:blog.mobileClass'》
    怎么办啊 ? ><

    ReplyDelete
  3. 还是不行 >< 好象是说 HTML 有错误 ...
    怎么办 ?

    ReplyDelete
  4. 谢谢你的帮忙 :DD 我现在会了 ^^
    真的很感激 :)))

    ReplyDelete
  5. Can't find 《body expr:class='"loading" + data:blog.mobileClass'》 @@!

    ReplyDelete
  6. hehe,我也找不到《body expr:class='"loading" + data:blog.mobileClass'》
    -.-

    ReplyDelete
  7. sry,ican't find 《body expr:class='"loading" + data:blog.mobileClass'》

    ReplyDelete
    Replies
    1. Hmm.. I can't visit to your blog and leave a comment to you ;)

      Try to find [body].
      P/S: Change [] to <> ^^

      Have a nice day.

      - by BII

      Delete
  8. sry again...-.-
    i don't understand...
    http://wenmome.blogspot.com/
    wlc to visit :)

    ReplyDelete
  9. soli >< 看不明~~ 我照着做了但也找不到《body expr:class='"loading" + data:blog.mobileClass'》

    我是想弄chat的 该怎么弄了? 麻烦了 /,\

    ReplyDelete
  10. 找不到body expr:class='"loading" + data:blog.mobileClass的话
    要找什么code?

    ReplyDelete
  11. 哦哦 谢谢 那第一次添加代码那边的图片url是指什么的 不明白 ><

    ReplyDelete
  12. 找不到《body expr:class='"loading" + data:blog.mobileClass'》

    ReplyDelete
    Replies
    1. 由于你的部落格没有 Cbox、所以我知道 reply 在这里噜 ;)

      若找不到 [body expr:class='"loading" + data:blog.mobileClass'],那么,试试看代码 [body] ;)
      将 [] 改成 <> 嗯 ^^

      Have a nice day, BII.

      Delete
  13. 我做到了,可是为什么我的字却" 挤”在一起的 ?

    http://i.imgur.com/5Q4B8.png

    我在实验室做的 ;)

    ReplyDelete
  14. 弄是弄到了..可是放不到在左上角:(

    ReplyDelete
  15. 有放 , 可是还是不行..

    ReplyDelete
    Replies
    1. hmm.. 那你介意给我看看你放了的代码么?
      inbox 去我的 FB
      : https://www.facebook.com/ShehJing

      ;)

      Have a nice day, BII.

      Delete
  16. 请问需要加什么代码才能弄去左上角呢?:)

    ReplyDelete
  17. 请问“页面的名称”要如何加框框?例如dashed...solid...等等的。

    ReplyDelete
    Replies
    1. 那个你要在 ]]> 上面 create 一个新的代码,例子:

      navi[
      你要的 effect 代码(框框那些可以添加)
      ]

      然后,在你添加的代码那里,加上 [navi]...[/navi]
      例子:[navi][a class='poplight' href='#?w=500' rel='1'][img src="图片 url" /][/a][/navi]

      PS: [] 换成 <>

      我解释到有一点复杂,不知你明白么 =]

      BII.

      Delete
  18. 找不到《body expr:class='"loading" + data:blog.mobileClass'》

    ReplyDelete
  19. 嗯,我的图片显示不到。
    教程有些复杂。
    帮忙解释下 TT

    ReplyDelete
    Replies
    1. 教程复杂我已经注明在上面了。
      图片显示不到,指的是内容里面的图片显示不到,还是点击那个页面的图片显示不到 ?
      麻烦你注明清楚,不然我不知道要怎么帮你 :)

      -replied by Bii.

      Delete
  20. 不好意思 为什么我照着做还是没效果的 ?
    是不是一进去就弹出来的 还是要按什么 ? ><
    拜托回复 :)

    ReplyDelete
    Replies
    1. 这个不是已经去就弹出来的效果 :3

      麻烦看清楚教程好吗 ? ==

      -replied by Bii.

      Delete
  21. 要怎样才能在按出来的框框里添加图片?

    ReplyDelete
    Replies
    1. 2. 图片 [img src='图片 url'/]

      把 [ ] 换成 < >

      在教程里的 extra knowledge 有提到哦 :)

      -replied by Bii.

      Delete
  22. 成功了!非常感謝~不過想問多一個東西,可以在裡面加scroll bar嗎?

    ReplyDelete
    Replies
    1. 可以哦亲,在 .popup_block{ 里添加 height:300px; overflow-y:auto; 就可以了 :)

      - replied by Bii.

      Delete
  23. 我弄不到 >< 说 HTML 错误在第十个步骤 TT 怎么办呢

    ReplyDelete
    Replies
    1. 可以 screenshot 你的第10个步骤那里的代码给我看吗~ :)

      -replied by Bii.

      Delete

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

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

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