让回复留言的按钮动态点

每个博客辛苦写完文章后当然是希望得到更多的回应,而在WordPress系统中我们可以使用如Think Again做的优秀插件mailtocommenter。这样我们会得到一个回复的图标,方便访客。但每个回复的图标都呆呆地躺在那里,显得也有点冷落。那我们就做点什么的,让这个重要的图标带点活力。

处理的方法很简单,就是使用几句CSS的语句,让回复图标只在鼠标停留在所在留言楼层才会出现,否则它就隐藏起来。这样会出现和消失的图标一定会吸引访客的,效果应该比默认显示的好。

081216 让回复留言的按钮动态点

其实效果就是象twitter的回复图标的出现方法一样了。在Sofish最近的文章《10个改善UI设计的技术》中(建议阅读!)也提供了这个效果的制作方法。在我的模板中,我增加的代码如下:

.re_icon img {margin-left:5px;border:none;}
.commentlist li .re_icon img { display: none; }
.commentlist li:hover .re_icon img { display: inline;}

其中:

第一句:.re_icon img用来决定回复图标的基本样式位置等;
第二句:指定图标默认隐藏;
第三句:指定当鼠标停留在.commentlist li这一层时候,回复图标出现。一般属性可以写display: block;,如果你发现位置有点异样,可以象我一样写成display: inline;。

是不是很简单,但效果绝对不错。如果你是用RSS阅读我的文章的话,也建议到我网站上去看看玩玩,不错不错的。

P.S. 再把这个小功能加上去后,突然发现自己把blog当作玩具了,尤其那些Ajax的效果,点来点去真的挺好玩的,呵。

分类:WordPress, theme skill;标签:, , ;收藏本文的永久链接

40 Responses to “让回复留言的按钮动态点”

  1. YaYa 回复此留言 2008/12/17 01:15 #comment-3644

    这个功能蛮好的,让留言版面更干净简洁。

  2. Jinwen 回复此留言 2008/12/16 23:48 #comment-3642

    自己沙发一个,让大家看效果。

  3. 久酷 回复此留言 2008/12/17 00:28 #comment-3643

    嗯,很不错的效果……

  4. Rui Shen 回复此留言 2008/12/17 08:49 #comment-3651

    报告,我使用Opera 9.52并没有在你的站点看到这个效果!

  5. xiaorsz 回复此留言 2008/12/17 02:42 #comment-3645

    很实用的功能!!!

  6. Yacca 回复此留言 2008/12/17 04:41 #comment-3646

    在尽量不影响速度的情况下...多点ajax的应用是很有趣的 新theme到时候有时间也来搞yixia~~^^

  7. Shawn 回复此留言 2008/12/17 05:45 #comment-3650

    这个很棒!不过有个建议,就是用 jQuery 实现,要不 ie6 下等于少了个功能。虽然很讨厌 ie6,但是它的用户真的很多。

  8. 喵小可 回复此留言 2008/12/17 13:07 #comment-3665

    不错,谢谢分享!

  9. Jinwen 回复此留言 2008/12/17 09:03 #comment-3653

    @Rui Shen: 呵呵,不好意思,估计是刚才我在调试使用jquery做这个效果你正好访问了。你现在可以再试下,效果应该是有的。

  10. Jinwen 回复此留言 2008/12/17 09:49 #comment-3654

    @Shawn: 建议很好,其实原来只是玩玩。那我把它改过来吧,呵呵。

  11. ZH CEXO 回复此留言 2008/12/17 10:08 #comment-3658

    好玩,不过考虑了半天,还是不加算了……

  12. Jinwen 回复此留言 2008/12/17 10:10 #comment-3660

    @ZH CEXO: 呵呵,这是个方法而已。或者你会想到更好玩的。

  13. Betty 回复此留言 2008/12/17 10:15 #comment-3661

    谢谢,很有趣,回头我也用上:)

  14. Rui Shen 回复此留言 2008/12/18 04:52 #comment-3681

    恩,不错的功能啊,这次看到了 !

  15. 子竹 回复此留言 2008/12/18 06:05 #comment-3684

    @ZH CEXO: 好加的话,我要是事实

  16. loren 回复此留言 2008/12/18 04:24 #comment-3680

    jinwen,你好,我是个菜鸟,我很想知道你上面的那段添加的代码是修改的哪个文件?歇息

  17. iColor 回复此留言 2008/12/18 08:49 #comment-3685

    你那个 Reply 按钮也不占什么地方放在那也挺不错的,因为你 blog 页面右侧空白较大,可能有些朋友鼠标就根本不来去碰到评论区域,最近因为 Sofish 那个文章好几个朋友都这么干了,但大家是各有各样式,感觉反而会让用户多了一个"找按钮"的过程.

    P.S. 其实我是来看回复评论的效果的...

  18. Jinwen 回复此留言 2008/12/18 09:53 #comment-3691

    @iColor: 是哦。都是一个试验过程,旁边的空白处让我想想怎样利用先行。其实发觉这个按钮用的频率除了admin外并不多的。

  19. 天涯始之堕落 回复此留言 2008/12/18 14:55 #comment-3707

    呵呵,这个功能感觉还不错啊

  20. 醉倚西风 回复此留言 2008/12/19 12:19 #comment-3739

    代码添加到哪啊

  21. Jinwen 回复此留言 2008/12/19 12:23 #comment-3740

    @醉倚西风: .re_icon这个是回复图标的区块定义,把它放到你的评论楼层的.commentlist li区块内,一般是修改comment.php文件。然后再把上面的样式代码放到style.css文件中,基本上是这样。

  22. Adam 回复此留言 2008/12/20 13:26 #comment-3773

    @iColor: 这个体验不错~

  23. 99839 回复此留言 2008/12/24 04:33 #comment-3857

    问一下mailtocommenter自定义设置该怎么填写代码呢?是不是就是图片地址?
    不会设置mailtocommenter

  24. Jinwen 回复此留言 2008/12/24 11:00 #comment-3865

    @99839: 自定义链接就是直接填写图片的链接代码,在后台上作者应该列出例子的啊。如果你想换图片,直接替换插件目录内的图片也可以的。

  25. ryan 回复此留言 2008/12/27 12:32 #comment-3903

    跟楼上同样疑问
    找不到地方加
    试来试去都不行
    可以的话
    把你的comment.php发我邮箱我参考下
    谢谢

  26. Jinwen 回复此留言 2008/12/27 12:56 #comment-3904

    @ryan: 如果是这个主题,添加的地方在这个P段落内。

  27. 北极冰仔 回复此留言 2009/01/02 12:53 #comment-3993

    试试看。

  28. Aw 回复此留言 2009/01/03 04:36 #comment-4003

    很不错的想法!

    不过,个人觉得,从用户体验的角度来讲,动的元素太多,可能会让用户觉得confusing,还不如全部一五一十地放在界面里。

    我的建议是,如果要动,就尽量要拉开“简单”-“复杂”的关系层次。例如鼠标没有移动到一个留言上时,仅显示留言的头像和内容,这样界面显得十分清爽,而鼠标移动上去之后,显示名字、时间、回复等等,而且这些“动的元素”不能散列太开,一定要集中。

    我还是倾向于让界面尽量别动,呵呵~

  29. 木木木木木 回复此留言 2009/01/04 10:15 #comment-4012

    不行诶...

  30. lliin 回复此留言 2009/01/04 22:44 #comment-4015

    @北极冰仔: 测试一下

  31. Jim 回复此留言 2009/01/21 04:46 #comment-4168

    测试效果~

    • Jinwen 回复此留言 2009/01/21 15:58 #comment-4172

      可惜现在的1.5 beta主题没能看到效果呢。

  32. xiaobai 回复此留言 2009/02/14 13:32 #comment-4448

    饭否 http://www.fanfou.com 有这样的效果吗?

    • Jinwen 回复此留言 2009/02/14 17:21 #comment-4451

      饭否是有这种效果的,其实就是学twitter的啦。

  33. revelc 回复此留言 2009/09/09 08:42 #comment-9647

    不错的教程!虽然不是很具体,总算成功了!


The trackbacks and pingpacks: