无评不博!为你的评论框添加漂亮的图片背景

评论框添加图片背景在《为你的WordPress博客添加版权声明》一文中,我为朋友们介绍了在博客日志中添加版权声明的方法,而本文菠萝将为大家介绍评论框内添加图片背景的方法。在讲设置方法之前,请大家看本文的评论框,里面我设置了“无评不博,相信你的评论一针见血”背景图片,添加上这样的图片,很容易激起大家的发言欲望,对你的博客热度的提升很有帮助,下面以WordPress博客为例,把我设置的方法与大家分享,其他博客方法基本相同:

首先,找到你所用风格的评论所在文件,我用的是M12的iNove风格,评论文件就是comment.php,打开此文件,发现评论框是用textarea代码来控制,并且textarea文本区域对应的CSS样式表ID为comment,这样我们就到主题样式表style.css里找到#comment代码,这个就是定义评论框的样式的,我们发现原来的代码为:

#comment {width:601px;}

这时,我们就可以通过改这个代码来实现给评论框添加上背景图片,添加后完整代码如下:

#comment {width:601px;background-image:url(img/comment-bg.gif);background-repeat:no-repeat;background-position:right bottom;}

下面对以上代码简单介绍:

width:是定义评论框的宽度;

background-image:url(图片地址),这里的图片可以绝对地址,也可以是相对地址,相对地址是相对style.css文件的,我就是用的相对地址。

background-repeat:no-repeat; 定义图片是不是重复;

background-position:right bottom; 定义图片对齐方式,这里是向右、底对齐。

之后你做个图片上传到你的空间,图片地址要和设置地址一致,建议图片宽度不要大于文本区域宽度,高度在200以内。效果参考本博评论框。

落花生

认准了方向,就要勇敢地走下去,十年磨一剑,我相信,只要坚持,一切都有可能。

相关日志

  1. 没有图片

    2013.08.28

    WordPress主题 NewsPlus 安装使用教程

    很多朋友都在使用我发布的原版汉化作品 New…

  2. 没有图片

    2010.05.12

    WordPress评论统计的一大Bug

    WordPress目前来看已经很完善了,但菠…

  3. 没有图片

    2010.09.27

    Outlook 2010 的功能和优点

    Microsoft Outlook 2010…

  4. 没有图片

    2009.12.15

    WordPress插件CommentLuv:让你的博客评论也热闹

    很早就想为大家写这篇文章,只是因为时间太紧,…

  5. 没有图片

    2010.12.23

    免费顶级域名注册推荐 dot.tk

    估计很多朋友特别是新站长肯定想不花钱注册域名…

  6. 没有图片

    2009.10.27

    菠萝筐启用WordPress代码高亮插件wp-syntax

    Image via Wikipedia 在博…

评论

  1. 一起囧 2010.05.11 10:45上午

    不错诶 我也来一针见血吧
    .-= 一起囧的最新日志:我来推荐个海外空间吧! =-.

  2. 妖娆男 2010.03.28 8:02上午

    哈哈,从你这学到不少呢。希望你把这个“无评不博”的完整图发给我邮箱一份吧,谢谢。我弄了个山寨的,颜色太淡了,是从你这截的图。
    另外,你的“版权声明”最后出现的“本文链接”地址打不开,是错误的,我试验了一下,是因为多了个代码,就是中间的!我取掉就好了。

  3. 水水 2010.03.08 11:54上午

    不错哇,很好看·~
    .-= 水水的最新日志:和时间赛跑,和自己赛跑 =-.

  4. Zenoven自由人 2009.11.05 6:01下午

    我很久没给网站改动了。。。感觉现在还是写内容好,以后找个时间专门给界面优化下

  5. ibayern 2009.11.04 9:59下午

    不错不错,学习下!

  6. 漫步徜徉 2009.11.02 8:17下午

    谢谢分享 先收下了

  7. keon 2009.10.29 11:47下午

    不错的东西~~我也来试试

  8. magicshui 2009.10.29 11:43下午

    效果不错,挺喜欢的……实用才是王道

  9. newcoin 2009.10.29 10:27上午

    很有意思,学习了

  10. 菠萝 2009.10.27 7:36下午

    @理想博客
    喜欢就好!

    @一米
    看到了,很好的效果!

  11. 一米 2009.10.27 11:55上午

    已经再用了啊,哈哈。

  12. Gil 2009.10.26 11:11下午

    额,俺也我自家的博客上加个试试,希望广大的博友针针见血,嘿嘿!~~

  13. 疾风 2009.10.26 10:48下午

    很好看哦,考虑给我也弄一个~ 呵呵~

  14. 一起来玩吧 2009.10.26 10:40下午

    不错 啊

  15. 理想博客 2009.10.26 7:17下午

    前几天正在找这个设置了。谢谢了。

  16. 随影 2009.10.26 2:19下午

    呵呵 确实 挺好看的

  17. MuMu’S 2009.10.26 12:03下午

    很好的功能啊。
    而且字体眼色很你的博客很搭。

  18. lovenhe 2009.10.26 8:55上午

    很好 很强大……

  19. qiqiboy 2009.10.26 3:09上午

    。。。嗯。。这个实在,以前在博客大巴时就搞过。。

  20. 微知博客 2009.10.26 1:31上午

    我觉得评论数不能代表什么

  21. 菠萝 2009.10.25 10:29下午

    @Thinkqob
    呵呵,谢谢!

  22. Thinkqob 2009.10.25 9:28下午

    主题改的真漂亮

  23. 左岸读书 2009.10.25 6:47下午

    我也在思考一个好的评论背景图!

  24. 翔子 2009.10.25 6:15下午

    这个不错 回头我去试下~

  25. 戴亮 2009.10.25 5:46下午

    好看,牛啊!!!

  26. waitwho 2009.10.25 4:55下午

    那些“相信你的评论可以一针见血”之类的框框是咋回事哇?

  27. 菠萝 2009.10.25 4:48下午

    @静夜燃香
    你按教程弄好了,说明教程有用,不用客气!

    @三七八蛋
    谢谢加我!我去审核一下!

  28. 菠萝 2009.10.25 4:44下午

    @zwwooooo
    图片还是少点好!
    @帅青蛙
    对,可以自己设计个字体,我看到365hope的就不错。

    @mimzyx
    我的图片在这个主题目录iNove下的img/comment-bg.gif,CSS里只要输入 “img/comment-bg.gif”即可。

  29. 三七八蛋 2009.10.25 12:15下午

    不错。弄个图片是有味道一点。
    加入你 的GOOGLE朋友了。

  30. 减肥药排行榜 2009.10.25 10:48上午

    这个背景看的很舒服,不错

  31. 先看看 2009.10.25 10:16上午

    改天我也来一个好了

  32. 365hope 2009.10.25 9:34上午

    嗯,非常漂亮,非常好玩!

    貌似我早已经这样做了啊!呵呵~~~

  33. 超人 2009.10.25 4:28上午

    呵呵. 我以前加了.现在懒的加这东西了.~

  34. mimzyx 2009.10.25 12:15上午

    比如你的相对地址来说,是把图片放在哪?

  35. 静夜燃香 2009.10.25 12:04上午

    哈,添加了评论框的图片,版权声明也加了。很好用哦^^
    谢谢博主了。

  36. 帅青蛙 2009.10.24 10:45下午

    @whisperer
    我觉得字体换换就好了。现在的字体忒硬。。。 艺术字更好点。

  37. whisperer 2009.10.24 10:16下午

    设计得挺不错~~

  38. 不死鸟 2009.10.24 8:51下午

    无折腾,不博客

  39. zwwooooo 2009.10.24 8:33下午

    哈哈,不错啊,很多博主都加了,不过我就不加了,现在的主题用的图片够多了

  40. 华晨 2009.10.24 8:19下午

    真漂亮呀

  41. canaan 2009.10.24 8:13下午

    想不到加什么字,索性就不加了

  42. 菠萝 2009.10.24 7:46下午

    @Louis Han
    呵呵,谢谢,这个效果和版权声明弄了一下午,水平有限,多多指导!

  43. Louis Han 2009.10.24 7:35下午

    呵呵 这背景真的不错 看来是用心设计了

About

马拉松运动员,沉迷于跑步;关注科技前沿,关注互联网!与跑者、程序员、设计师为伍,一起跑步健身,一起编写程序,为自由而战!