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

Blogger Related Posts

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

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

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


纯CSS的方法


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

#related_posts {
height:146px;
}

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

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特效,不知你发现了没有?

4 comments now

  1. 不错,却不大想用,能看到blogger就好。

    回复删除
  2. @虚飞:
    我折腾这个主要还是觉得好玩而已,而且我相信肯定有人要用的

    回复删除
  3. @小天:
    呵,这个jQuery的代码一开始还不够简洁,之前更新了好几次几次
    刚才又改了一下,应该是最简的了

    不过这个有一个缺点,当相关文章数太少时会留下空白,不太好看,这就不是我能解决得了的了......

    回复删除