龙三公子博客 - 让自己的内心藏着一条巨龙,既是一种苦刑,也是一种乐趣!
龙三公子博客是一个草根站!一个业余电脑爱好者的独立博客,博客内容综合所有点滴,主要涉及电脑网络、健康养生、日常生活等!

zblog多说评论框CSS美化(炫动图像+背景图片)

    从博客互推联盟访问博友们的博客,发现好多用了多说评论框的有些都有一些特色,比方说有的图像是炫动的,如下图的这种,zblog多说评论框CSS美化(炫动图像+背景图片)  多说 评论 背景 CSS 第1张还有的是字体不一样的,也有的是评论框底部没有什么分享微博QQ空间什么的&hellIP;…于是就产生了好奇搜索了下,原来是CSS在作怪,也就是说多说评论框可以自己定义CSS来美化个性化。
    知道了原理,所以就想在自己龙三公子博客也来折腾一下。于是先请教了我们博客互推联盟的盟主张戈博客(他博客的评论框图像就是炫动的),他说他博客有一篇文章《分享一个多说头像的动态酷炫CSS样式》就是写这个,顺便也给我简单指点了下。
    看完后,我马上实践。很简单,正如他博文所说将代码直接贴到主题style.css中保存即可。弄完后效果马上就出来了。不过,我又稍加润色了一下,因为想起了之前我博客默认评论框的背景,于是我把它又加进来了,现在基本上又回到原来面貌了,立竿见影哈。
    多说CSS美化评论框远远不止这些,我在Nifree|站长笔记http://www.nifree.com/duoshuo.html中发现了更多的自定义代码,有兴趣的也可以去看一下。而我博客这个用到的两段代码如下:
    代码一:评论图像炫动
/*多说附加样式*/
#ds-reset .ds-avatar{background:none !important; box-shadow:none !important;}
#ds-reset .ds-avatar img , #ds-thread #ds-reset ul.ds-children .ds-avatar img{width:50px !important;height: 50px !important;-webkIT-transition: .8s;-moz-transition: .8s;-o-transition: .8s;-ms-transition: .8s;padding:3px;border: 1px solid #ddd;background: #fff;}
.ds-post:hover .ds-avatar img{transform:rotate(720deg);-webkit-transform:rotate(720deg);-moz-transform:rotate(720deg);-o-transform:rotate(720deg);-ms-transform:rotate(720deg);border-radius:30px !important;}
#ds-thread #ds-reset .ds-comment-body, #ds-thread #ds-reset ul.ds-children .ds-comment-body{padding-left:70px !important;}
.ds-post:hover{background:#eee !important;}
#ds-thread #ds-reset ul.ds-children .ds-avatar{width:50px !important;}
#ds-thread #ds-reset .ds-replybox{padding: 0 0 0 80px !important;}
#ds-reset #ds-ctx .ds-ctx-entry .ds-ctx-body{margin-left: 68px !important;}
#ds-recent-comments li.ds-comment:nth-of-type(1){border:none !important;}
/*多说附加样式结束*/
    代码二:评论框背景
/*定义评论框背景*/
.ds-textarea-wrAPPer.ds-rounded-top{
background: #ffffff url(https://www.mybabycastle.com/image/pinlun.gif) no-repeat center bottom !important;
}/*定义评论框背景*/
    以上代码可以合并然后一起放入你博客模板主题下的style.css中即可。好了,喜欢的朋友们也来试试吧!

打赏 zblog多说评论框CSS美化(炫动图像+背景图片)  多说 评论 背景 CSS 第2张支付宝打赏 zblog多说评论框CSS美化(炫动图像+背景图片)  多说 评论 背景 CSS 第3张微信打赏
超级双11

  • 05-30zblog调用文章评论数的修改 36
  • 10-02博客垃圾评论再吐槽 0
  • 12-11话说博客的垃圾评论 8
  • 06-09zblog调用多说文章评论数只显示数字的方法 23
  • 02-12长草了,荒了 0
  • 标签: 多说 评论 背景 CSS
    分类:主页制作| 发布:龙三公子| 查看:1363 | 发表时间:2014-05-10
    原创文章如转载,请注明:转载自龙三公子博客 https://www.mybabycastle.com/
    本文链接:https://www.mybabycastle.com/post/523.html
    评论区文字+图片,怎么让他们俩分开展示
    2019-04-10 16:39:21 回复该评论
    认真进行了学习。
    2017-03-12 11:26:52 回复该评论
    很实用,学习中
    2017-03-12 11:26:52 回复该评论
    这个效果不错,我也在用,嘿嘿!
    2017-03-12 11:25:50 回复该评论
    这个CSS是挺好玩的,就默认的好啊
    2017-03-12 11:25:49 回复该评论
    沙发支持
    2017-03-12 11:25:48 回复该评论
    认真进行了学习。
    2017-01-25 19:43:16 回复该评论
    认真进行了学习。
    2017-01-25 19:43:16 回复该评论
    很实用,学习中
    2017-01-25 19:43:16 回复该评论
    很实用,学习中
    2017-01-25 19:43:16 回复该评论
    这个效果不错,我也在用,嘿嘿!
    好多人在用,就跟着学来了。是不错!
    2017-03-12 11:25:50 回复该评论
    好多人在用,就跟着学来了。是不错!
    2017-01-25 19:42:16 回复该评论
    2017-01-25 19:42:16 回复该评论
    这个CSS是挺好玩的,就默认的好啊
    我喜欢折腾,在折腾中成长学习。默认的是也不错,各有各的好处。
    2017-03-12 11:25:49 回复该评论
    我喜欢折腾,在折腾中成长学习。默认的是也不错,各有各的好处。
    我讲错了,这个比默认的好,看自己喜欢哪种了
    2017-03-12 11:25:49 回复该评论
    我讲错了,这个比默认的好,看自己喜欢哪种了
    是的,我就是觉得好玩,才搞的。
    2017-03-12 11:25:49 回复该评论
    是的,我就是觉得好玩,才搞的。
    2017-01-25 19:42:16 回复该评论
    2017-01-25 19:42:16 回复该评论
    2017-01-25 19:42:16 回复该评论
    2017-01-25 19:42:16 回复该评论
    沙发支持
    感谢一如既往的支持!
    2017-03-12 11:25:48 回复该评论
    感谢一如既往的支持!
    2017-01-25 19:42:14 回复该评论
    2017-01-25 19:42:14 回复该评论

    已经有 ( 23 ) 位网友发表了评论,你也评一评吧!  

    Design By XvDesign.Com | Login | Power By Z-BlogPHP 1.5.2 Zero
    点击关闭
    • 联系客服