转:iFire:玩聚 SRBacks 自定义脚本及样式表

感谢iFire的第一时间修改并试用,而且调试出如此清新的样式。
下面转贴一下他的自定义脚本和样式表:

玩聚 SRBacks 自定义脚本及样式表

admin @ 2009-01-11 02:34 59

    今天玩聚推出了社会化推荐聚合服务中的一项有趣的页面挂件应用:SRBacks,十分实用也十分有趣。我当即引入自己的博客页面,不过发现其中的嵌套有误、呈现效果不够理想,于是将脚本下载下来自定义,改完之后自己感觉还不错。

    对于外来挂件,其内嵌的样式有时候会给自己的页面造成挺大的麻烦,因此我尽量删减脚本中的内嵌样式,而是将其赋予伪类值(class),然后将样式写入样式表,这给自定义样式的用户会带来较大的空间。

    在 Twitter 上讨论了一番之后,我自行修改脚本,用笨办法解决了在列表里隐藏博主条目的问题。同时,也给用户头像、Google Reader 图标赋予了伪类值,这样自定义的时候可以轻松地将它们隐藏或是设置图像尺寸。

    我修改的版本大体上算是自适应的,只是我测试宽度为 180px 的时候出现溢出,这应该是推荐文字中的长链接字符造成的,因此如果您是在侧栏调用,最好在设置一下条目 (#srbacks li.srbacklist )宽度,并加上 overflow: hidden; 应该就能解决。

    我建议将我提供样式表文件在页面<head>标签内单独引用,修改起来方便一些,我为所有的样式值之前都添加了 #srbacks 是为避免造成与您页面里的样式表冲突。

下载压缩包

    上传压缩包中的 SRbacks.js 及 srback.css 这两个文件到您管理的空间,假设路径是:http://yourdomin.com/widget/

在<head></head>标签内引入

<link rel="stylesheet" href="http://yourdomin.com/widget/srback.css" type="text/css" media="screen" />

    然后在模板内引入

<script type="text/javascript" src="http://yourdomin.com/widget/SRbacks.js"></script>

    Wordpress 用户可将其放在模板文件中的 comments.php 或是 sidebar.php 里。我推荐是在评论模板里调用。

    样式表文件中我已逐项标注了说明,修改时请参阅。下面是两张截图:

200px 呈现样式

500px 呈现样式


posted @ 2009-01-11 07:53  老兵笔记  阅读(715)  评论(0编辑  收藏  举报