教程 | 如何添加页面 (Pages)

心情那一个叫沉重啊—— 知道 PMR 成绩放榜的日期了。我完全处于惊慌的状态中。开始担心起自己的成绩了。对这次的 PMR 完全没有信心。啊啊啊，算了。先别提这件事情 ~ 部落格照常运作。大概在我去新加坡玩的那几天，我会开放一次回馈（就是制作订单的意思啦  囧''）那篇帖子会在我去新加坡的那一天自动发布哟。所以啦，有关注我的博友们，要把握机会哟。颗颗 ♥

说回这次的教程，其实「如何添加页面」，在 简单介绍新界面 这篇教程里面其实有简单介绍过了。只是貌似很多博友还不知道，所以我只好再来发布多一次。希望大家会更加明白哟。而且，我有主意到，很多博友会开 *新帖子*，然后把那新帖子当做页面在用。额，其实有可能是大家都误会了 / 故意的。没关系啦，你们喜欢就好 /3\''

- Tutorial requested by 静涵 ♥ & Kok Hui Ee -

大 家有没有发现到，图片里面的网址中间都有一个 p/xxx.html 的字眼 ? p 代表着 page 的意思。如果大家用 *新帖子* 来当成你的页面的话，当你要编辑里面的内容时，就得找出那篇帖子才能编辑。可如果大家用正确的方法来开新页面的话，就会很容易找到你们的页面来编辑了。我会使用图片来说明开新页面的方法哟。

     

点击进入【空白页面】以后，会出现跟帖子格式一模一样的页面，把你的页面标题填入，还有你的页面内容填入后，即可点击【发布】。好啦，教程就是如此的简单 ♥ 希望你们看的明白我的教程哟。喜欢的话，就点击一个 LIKE 给我吧。

相关教程：

- 添加图片页面 -

- 将页面隐藏在旁边 -

更多相关教程可查询 Tutorial 里面的页面教程。

教程 | 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, 欢迎你留言在这里，我帮你看看哪里出错了。

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

教程 | 添加图片页面

- Tutorial requested by Kah May -

1. 设计 → 页面元素 → 添加小工具 → HTML/JavaScript

2. 添加以下代码：

<a href="页面网址1"><img src="图片网址1"></a><br>

<a href="页面网址2"><img src="图片网址2"></a><br>

<a href="页面网址3"><img src="图片网址3"></a><br>

<a href="页面网址4"><img src="图片网址4"></a><br>

3. 保存即可。

小解释
红色代码：页面的网址
蓝色代码：代表该页面的图片的网址

辅助教程：将页面挂在部落格角落
1. 设计 → 页面元素 → 添加小工具 → HTML/JavaScript

2. 添加以下代码：

<div style="top: 5px; right: 5px; position: fixed;">

<a href="页面网址1"><img src="图片网址1"></a><br>

<a href="页面网址2"><img src="图片网址2"></a><br>

<a href="页面网址3"><img src="图片网址3"></a><br>

<a href="页面网址4"><img src="图片网址4"></a><br>

</div>

3. 保存即可。

小解释
紫色代码：距离部落格顶部多远
紫色代码：距离部落格右边多远
    ▪ top / right = 右上角
    ▪ top / left = 左上角
    ▪ bottom / right = 右下角
    ▪ bottom / left = 左下角
红色代码：页面的网址
蓝色代码：代表该页面的图片的网址

教程 | 将页面隐藏在旁边

- Tutorial requested by May & Yvonnr -

1. 设计 → 页面元素 → 添加小工具 → HTML/JavaScript

2. 添加以下代码：

<style type="text/css">

#gb{
position:fixed;
top: 50px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height: 400px;
width: 140px;
float: left;
cursor:pointer;
background:url('图片网址') no-repeat;
}

.gbcontent{
float:left;
border: 1px solid #666666;
background: #ffffff;
padding:10px;
}
</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 150-w) : moveGB(170-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">

内容在这里

<div style="text-align:right">
<a href="javascript:showHideGB()">
[close]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (140-gb.offsetWidth).toString() + "px";
</script>

3. 保存即可。

小解释
蓝色代码：小工具距离部落格顶部多远
紫色代码：小工具内容的边框类型、粗度、颜色等
紫色代码：小工具内容的背景色
红色代码：小工具的内容
青色代码：显示 Close button 的字

附注：
其实，这个小工具不止可以添加页面，也可以添加 ChatBox、播放器、你要写的留言等等等。看你有没有创意、够不够大胆而已。

教程 | 无链接式 navigator (BS)

1. 模板 → 修改 HTML

2. Ctrl+F 寻找代码 <style type="text/css">

3. 将以下代码添加在 <style type="text/css"> 的上面：

<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 style="outline: none; background-color: #fff;" href="#" class="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>

 4. Ctrl + F 寻找代码 </style>

5. 将以下代码添加在 </style> 的上面：

#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;
}

红色代码：页面的背景色

蓝色代码：页面边框代码

紫色代码：页面字体大小

注意：以下的步骤因每个人使用的 BS basecode 不一样，所以不方便告诉大家要将代码添加在那里。

6. 将以下的代码添加在你要小工具出现的地方：

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

7. 之后，将以下代码添加到 <body> / <body oncontextmenu='return false;'> 下面：

<div class='popup_block' id='1'>  

内容在这里。

</div>

红色代码：页面的代号（注：很重要）

紫色代码：页面的名称（显示在博客）

蓝色代码：页面里面的内容（可更改）

8. 预览一下，即可保存。

小解释

一、为什么我说页面的代号很重要？

当你要你某个页面出现某个内容时，页面的代号一定要一样。

就是说，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'/> 

相关文章：

- 无链接式 navigator (BT) -

教程 | 无链接式 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'/>

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

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

教程 | 坠落式页面

- Tutorial requested by Yw & Angel -

教程如上 ;]

1. 设计 → 页面元素 → 添加小工具 → HTML/JavaScript

2. 添加以下代码：

<center>

<style type="text/css">

#at{

position:fixed;

right: 300px;

z-index:+1000;

}

* html #at{position:relative;}

.attab{

height:100px;

width:30px;

float:left;

cursor:pointer;

background:url();

}

.atcontent{

float: left;

border: 2px solid #ffaad5;

background: #FFFFFF;

border-radius：20px;

padding:10px;

}

</style>

<script type="text/javascript">

function showHideAT(){

var at = document.getElementById("at");

var w = at.offsetWidth;

at.opened ? moveAT(0, -200-w) : moveAT(20-w, 0);

at.opened = !at.opened;

}

function moveAT(x0, xf){

var at = document.getElementById("at");

var dx = Math.abs(x0-xf) > 25 ? 35 : 1;

var dir = xf>x0 ? 1 : -1;

var x = x0 + dx * dir;

at.style.top = x.toString() + "px";

if(x0!=xf){setTimeout("moveAT("+x+", "+xf+")", 10);}

}

</script>

<div id="at">

<div class="attab" onclick="showHideAT()"> </div>

<div class="atcontent">

<div align="center">

<div style="background:url() no-repeat;">

<div style="text-align: center;">

显示的内容

</span></div>

</div>

</div>

<br />

<div align="right"><a href="javascript:void(0);" onclick="showHideAT()"><div style="color: #FFFFFF;">

<span ></span></div></a></a></div>

</div></div>

<script type="text/javascript">

var at = document.getElementById("at");

at.style.top = (-200-at.offsetWidth).toString() + "px";

</script>

<a href="javascript:void(0);"onclick="showHideAT()"/><img class="expando" src="点击图片的网址" alt="PUSH" title="Click"/></a>

</center>

3. 保存，即可。

小解释
青色代码：页面离旁边的距离  *可改
红色代码：页面的边框厚度、类型、颜色  *可改

紫色代码：页面的背景  *可改

蓝色代码：页面圆角的弧度  *可改

靛色代码：页面的内容（可以是文字 / 图片）  *可改

橙色代码：点击 drop down 页面的图片的网址

浅蓝代码：鼠标指向图片时出现的字  *可改

备注
♥ 若要空行，你必须添加 <br> 在内容的后面，例：

我是内容 1 <br>
我是内容 2

框框的种类

素材

提供自制的 click 图片几张、有需要可以拿去用 ;D

http://i1198.photobucket.com/albums/aa448/shehjing/blogger%20material/click1.gif

http://i1198.photobucket.com/albums/aa448/shehjing/blogger%20material/click2.gif

http://i1198.photobucket.com/albums/aa448/shehjing/blogger%20material/click3.gif

http://i1198.photobucket.com/albums/aa448/shehjing/blogger%20material/click4.gif