Creamy.

教程 | 无链接式 Navigator (BT)

By


- 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'/>

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

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


Categories: , ,

June 28, 2012

44 comments:

  1. 米尤琳July 4, 2012 at 4:41 PM

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

    ReplyDelete
  2. # 智英July 12, 2012 at 9:36 AM

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

    ReplyDelete
  3. # 智英July 13, 2012 at 9:09 AM

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

    ReplyDelete
  4. # 智英July 14, 2012 at 3:06 AM

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

    ReplyDelete
  5. VivianJuly 14, 2012 at 6:10 PM

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

    ReplyDelete
  6. 椰子君July 18, 2012 at 12:36 PM

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

    ReplyDelete
  7. момэ ♡July 21, 2012 at 3:03 PM

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

    ReplyDelete
    Replies
    1. Sheh JingJuly 21, 2012 at 3:09 PM

      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. момэ ♡July 21, 2012 at 10:38 PM

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

    ReplyDelete
  9. xiiao儍苽♥July 22, 2012 at 3:50 PM

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

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

    ReplyDelete
  10. nicole.miin1995July 28, 2012 at 2:41 PM

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

    ReplyDelete
  11. nicole.miin1995July 28, 2012 at 7:33 PM

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

    ReplyDelete
  12. Yan PeiJuly 30, 2012 at 3:40 PM

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

    ReplyDelete
    Replies
    1. Sheh JingJuly 30, 2012 at 10:42 PM

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

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

      Have a nice day, BII.

      Delete
  13. 薇兒♥August 4, 2012 at 12:33 PM

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

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

    我在实验室做的 ;)

    ReplyDelete
  14. Sok yiAugust 4, 2012 at 1:20 PM

    弄是弄到了．．可是放不到在左上角:(

    ReplyDelete
  15. 薇兒♥August 4, 2012 at 5:15 PM

    有放 , 可是还是不行..

    ReplyDelete
    Replies
    1. Sheh JingAugust 5, 2012 at 9:42 AM

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

      ;)

      Have a nice day, BII.

      Delete
  16. Sok yiAugust 5, 2012 at 12:51 PM

    请问需要加什么代码才能弄去左上角呢？:)

    ReplyDelete
  17. AnonymousAugust 26, 2012 at 8:10 PM

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

    ReplyDelete
    Replies
    1. Sheh JingAugust 26, 2012 at 8:24 PM

      那个你要在 ]]> 上面 create 一个新的代码，例子：

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

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

      PS: [] 换成 <>

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

      BII.

      Delete
  18. AnonymousAugust 28, 2012 at 8:01 PM

    明白了~谢谢你=)

    ReplyDelete
  19. 江敏August 31, 2012 at 2:19 PM

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

    ReplyDelete
  20. 薄荷♥MintNovember 12, 2012 at 4:46 PM

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

    ReplyDelete
    Replies
    1. Sheh JingNovember 12, 2012 at 10:13 PM

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

      -replied by Bii.

      Delete
  21. jesslinnnDecember 23, 2012 at 1:49 AM

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

    ReplyDelete
    Replies
    1. Sheh JingDecember 23, 2012 at 2:01 PM

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

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

      -replied by Bii.

      Delete
  22. Vitamin COctober 24, 2013 at 11:31 AM

    要怎样才能在按出来的框框里添加图片？

    ReplyDelete
    Replies
    1. Sheh JingNovember 17, 2013 at 2:54 PM

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

      把 [ ] 换成 < >

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

      -replied by Bii.

      Delete
  23. 琴語月October 19, 2014 at 7:48 PM

    成功了！非常感謝~不過想問多一個東西，可以在裡面加scroll bar嗎？

    ReplyDelete
    Replies
    1. Sheh JingDecember 29, 2014 at 4:55 PM

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

      - replied by Bii.

      Delete
  24. Siew_Wai、♥December 14, 2014 at 3:08 PM

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

    ReplyDelete
    Replies
    1. Sheh JingDecember 16, 2014 at 3:42 PM

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

      -replied by Bii.

      Delete

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

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

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

Subscribe to: Post Comments (Atom)