BRPS - Blogger相关文章,及其补充

BRPS是Blogger Related Posts Service的缩写，在我见过的各种相关文章的Blogger Hack当中可以说是最好的：可以在页面载入后才载入相关文章，不像其他Hack那样影响速度。

不过我在这里说的不是它的安装与定制，官方的教程已经非常说得非常详细清楚了。

不过这个BRPS有一点感觉不太好：因为是最后才载入的，而且载入之后页面高度会增大，如果你在它载入相关文章之前就在看评论的话，载入完后画面会跳到上面，感觉不太舒服。这里就想说如何解决这个问题。

导航

1.CSS
2.jQuery
3.一点解释

纯CSS的方法

---

这个就极其简单了，在CSS里添加以类似下面的代码即可：

#related_posts {
height:146px;
}
这里面唯一要注意的就是这个146px，具体多少要根据你的设置而定，你可以利用Firebug的布局功能找到它的高度，如图：



需要注意的是，因为CSS描述缺省时外间距默认为1px，所以你在定义CSS时，要在得到的高度的基础上加2，例如你的到144px，结果高度就必须为146px。如果你觉得计算起来有难度的话，可以在下面留言，我会帮你解决。

利用jQuery加上一些特效

---

当然，你也许还会觉得这样还不够好看，那么你也可以考虑像我一样使用jQuery。

首先，安装jQuery就不必了，安装BRPS的同时也会安装jQuery。

另外如果你已经使用了LVCHEN老大的最新回应2.0的话，应该可以在里面找到类似的代码，记得把它删去，否则会发生冲突。

接着，找到你之前安装BRPS的代码：

<div id='related_posts'/>
把它替换为：

<div class='Related-Post'>
<div class='Please-wait'>Please Wait...</div>
<div id='related_posts'/>
</div>
你可以把“Please Wait...”替换成其他文字或者图片，它将会在载入相关文章之前显示。

CSS当然也是不能少的，我是这么写的：

.Related-Post {
height: 146px;
}

.Please-wait {
font: 20px "Myriad Pro","Lucida Sans","Trebuchet MS",sans-serif;
color: #555;
text-align: center;
padding-top: 60px;
}
这里红色的高度与上面CSS的是一样的，其他部分就可以根据你的设置任意配置了，注意绿色的部分不要太大就行。

终于来到最后了，它的原理和Shawn大师的jQuery页面载入进度条的原理是一样的。在</body>之前加入以下代码 ：

<script type='text/javascript'>
$(".Please-wait").fadeOut(800);
</script>
这里红色的表示使用的特效，我使用的是淡出，你可以在官方的教程找到更多的。至于蓝色的么，就是特效的时间，单位是毫秒。

一点解释

---

也许你会感觉加入“Related-Post”这个class没什么意义，其实我也是不想加的。

但问题是“Please Wait...”也是占有一定高度的，但页面载入完后消失时它的高度也会消失，导致页面高度变小。而且经我测试发现“related_posts”这个id里无法往里面添加其他内容，最后只好再加一个class了事。

不过加入这个class还是有其他好处的，这样定义margin和padding相对会方便一些。

当然，不过你有更好的方法的话，不妨提出来分享交流。

P.S.其实不止是这里，我在其他地方也使用了一些jQuery特效，不知你发现了没有？