改进 RSS 图标用户界面 #2

上一篇说到 RSS 图标用户界面不够友好,所以我打算自己动手做一点改进工作。

首先逐个翻阅 Bloglines 上订阅的 blog,终于找到上一篇提到的 blog 就是 Herock Post

接下来,保存单篇文章的页面,在页面源代码和 CSS 文件中找到有用的信息。
可以看到“RSS订阅简要介绍”处使用了 switchStatus 函数,在 head 处可以找到对应的定义,复制到你的页面的 head 处。绿色的边框和背景则要在 CSS 文件中找到 .greenblock 的一段,同样也置入对应的 CSS 文件中。

然后是在侧栏最下方增加 XML 图标,以及3个子栏目。
其中“RSS 地址”用于直接复制地址;“直接订阅”方便注册了在线订阅服务的用户;“点击帮助”则为不太明白 RSS 是什么用户服务,我觉得 Herock 的说明很不错,所以稍加修改就拿过来用了。

在需要实现“扩展/折叠”效果的地方,分别加入脚本链接和对应的 id、style,如 greenDiv、display: none,如果不明白,查看页面源代码照着做就是了。

如果一切正常,“扩展/折叠”的效果已经可以看到了。最后是完善它的外观,如修改 CSS,使得边框配色、字体与你的侧栏风格一致。

如果你要像 Herock 那样写上一大段详尽的说明,那么一般侧栏的位置是容纳不下的,强行塞入只会让用户阅读困难。除了放置在文章下方充分利用页面宽度之外,还可以使用一些 javascript 脚本实现 tooltip 效果,如 Cool DHTML TooltipTooltip.js
本来我打算使用后者,结果在本地测试没有问题,正式修改以后通过代理访问大多数时候都失效,而且几个脚本文件体积不小,所以还是不用 tooltip,全部采用 Herock 的方法。

最终实现的效果请看 sidebar。
考虑到没有人会反复地看帮助说明,所以“帮助”放在了最下方;一般也不会有人想要折叠,我又想偷懒,所以就没给出“隐藏/折叠”按钮,如果需要,可以自己加上链接;帮助说明还是有些长,好在后面的话不是很重要。

posted: 2005/12/10
under: 灯泡短路, 软硬挨踢