改进一个自动收缩的客服系统qq+旺旺,样式简洁大方

2016-07-07 16:21 来源：www.chinab4c.com 作者：ecshop专家



在这里分享一个经过改进的在线客服-QQ加旺旺客服，原分享帖子是：http://bbs.ecshop.com/viewthread.php?tid=81157&highlight=%D4%DA%CF%DF%BF%CD%B7%FE

但原帖分享那个ServiceQQ.php文件在UTF8版下显示不出来，下面我把转换成UTF8版的ServiceQQ.php发布出来，大家可以用记事本形式打开，把测试网客服改成你想要显示的客服QQ名字，把123456修改成您的客服QQ.把document.write("<h2>测试网客服</h2>");这里的测试网客服修改为你的网站名字，上传到根目录这是显示在张开的标题栏里，样式如下图所示
1.gif

收缩起来的样式如下图所示：
2.gif

如果是中文名字的淘宝会员名，请大家去http://im.alisoft.com/info.html?flag=2#nogo 这里转换代码，再替换下面！！

<a target="_blank" href="http://amos.im.alisoft.com/msg.aw?v=2&uid=%E5%8D%A1%E6%9F%A0%E5%8D%A1%E6%AA%AC&site=cntaobao&s=1&charset=utf-8" ><img border="0" src="http://amos.im.alisoft.com/online.aw?v=2&uid=%E5%8D%A1%E6%9F%A0%E5%8D%A1%E6%AA%AC&site=cntaobao&s=1&charset=utf-8" alt="测试网欢迎您" /></a>

打开：themes/模版名称/style.css，在最后加入:

/* QQ客服 */
.QQbox{ z-index:99; width: 178px; right: 0; top: 40px; position: absolute;}
.QQbox .press{ right: 0; border: none; cursor: pointer;width: 33px; height: 158px;position: absolute;}
.QQbox .Qlist{ left: 0; width: 145px; background: url(images/qq_listbg.gif) repeat-y -155px 0;position: absolute;}
.QQbox .Qlist .t,
.QQbox .Qlist .b{ float: right; height: 6px; width: 145px; font-size: 1px; }
.QQbox .Qlist .t{ background: url(images/qq_listbg.gif) no-repeat left; }
.QQbox .Qlist .b{ background: url(images/qq_listbg.gif) no-repeat right; }
.QQbox .Qlist .con{ background: #fff; width: 90%; margin: 0 auto; }
.QQbox .Qlist .con h2{ height: 22px; font: bold 12px/22px "宋体"; background: url(images/qq_listbg.gif) repeat-y -163px 0; border: 1px solid #3a708d; text-align: center; color:#fff;}
.QQbox .Qlist .con ul{}
.QQbox .Qlist .con ul li{padding: 5px 0 0 8px;height: 20px; background: #ffffff;}
.QQbox .Qlist .con ul li.odd{ background: #fff; }
/*.QQbox .Qlist .con A IMG { width:23px; }*/


然后下载附件中的图片文件，解压后把qq_1.png、qq_listbg.gif这2个附件，放在你网站根目录那个images文件夹里
最后在网站后台库项目管理里找到页脚，在后面加上这句代码 <script src="http://您的网址/ServiceQQ.php"></script>就可以显示了，有问题大家跟贴吧！！




此方法只适合UTF8版的程序，GKB的请去原帖查看具体方法

图片.zip (4.6 KB)

ServiceQQ.zip (1.32 KB)


回答：
已经安装好，可是我的QQ头像是灰的，如何把给我留言改为和我联系，如何增加多个QQ，多个和我联系？
http://www.aizuanshi.com
盼解

你不上线当然是灰色的。。。。上线就不是给我留言了

这个很不错，我特意注册个帐号来问下问题：
1。添加之后在网页的最底部显示
2。鼠标经过，展开，但是没有背景

还望赐教，谢谢。

看到另一个发帖是跟你的一样的，， 但是两个都有点bug，结合两个的代码，终于搞好了。

二楼应该是没有改成自己的QQ号，所以会是灰色。

支持了,不错的东东

还未成功

<a href="http://www.taobao365.com.cn"><img src="http://www.900.la/u/2009/06/02/1243901651bY52.gif" border="0"></a>

终于成功了一天一夜的努力测试谢谢楼主



我把代码加在了页面的最底部，显示出来的客服也是在最底部。求助
网站地址 http://www.china-chaju.cn

未命名.jpg (11.95 KB)

未命名.jpg


OK了2个帖子一点要结合起来看不然搞死人的 花了1个半小时研究成功谢谢楼主分享

10# yyyy88 回原贴看style.css修改按原贴的改法改了从新上传，本我也是以这贴修改，开始就好，然后我把style.css复原，就出现你说的这情况。我也是刚刚在找UTF-8解决办法，现在我也好了成功了，谢谢了支持下

4# hcy109 你试试在目录下/模版/images/在把那两张图片放进去

小小总结一下GBK的我没试过，UTF-8的用楼主所说的原贴按原贴第二步：打开：themes/模版名称/style.css，在最后加入以下代码，修改后从新上传:

/* QQ客服 */
.QQbox{ z-index:99; width: 178px; right: 0; top: 40px; position: absolute;}
.QQbox .press{ right: 0; border: none; cursor: pointer;width: 33px; height: 158px;position: absolute;}
.QQbox .Qlist{ left: 0; width: 145px; background: url(images/qq_listbg.gif) repeat-y -155px 0;position: absolute;}
.QQbox .Qlist .t,
.QQbox .Qlist .b{ float: right; height: 6px; width: 145px; font-size: 1px; }
.QQbox .Qlist .t{ background: url(images/qq_listbg.gif) no-repeat left; }
.QQbox .Qlist .b{ background: url(images/qq_listbg.gif) no-repeat right; }
.QQbox .Qlist .con{ background: #fff; width: 90%; margin: 0 auto; }
.QQbox .Qlist .con h2{ height: 22px; font: bold 12px/22px "宋体"; background: url(images/qq_listbg.gif) repeat-y -163px 0; border: 1px solid #3a708d; text-align: center; color:#fff;}
.QQbox .Qlist .con ul{}
.QQbox .Qlist .con ul li{padding: 5px 0 0 8px;height: 20px; background: #ffffff;}
.QQbox .Qlist .con ul li.odd{ background: #fff; }
/*.QQbox .Qlist .con A IMG { width:23px; }*/

接下修改方法如楼主所说方法即可，其实就按楼上所说两贴组合着来
注：如无图片背影可试着同时在目录下/模版/images/在把那两张图片放进去

我上线了也是灰色的，有点BUG