应用成趣 » Widget http://if.api.li 有没有用不重要 有不有趣很重要 Wed, 09 Dec 2009 17:50:59 +0000 http://wordpress.org/?v=2.9.1 en hourly 1 玩聚 SRBacks 自定义脚本及样式表 http://if.api.li/20090111 http://if.api.li/20090111#comments Sat, 10 Jan 2009 18:34:59 +0000 iFire http://if.api.li/20090111 今天玩聚推出了社会化推荐聚合服务中的一项有趣的页面挂件应用：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 呈现样式

不如总在途中 于是常有希冀

Twitter this add to delicious share to friendfeed

Posted by iFire @ 2009-01-11 | About | Permalink | Add Comments | Trackback | Feed | My Lifestream
注：阅读器无法识别文章中的多媒体文件

counter

Feed enhanced by Better Feed from Ozh

]]> http://if.api.li/20090111/feed 4