Skip to main content
 仿站网 » 仿站教程 » 帝国cms教程

帝国cms 增加网站客服

2019年03月29日17130百度已收录

帝国cms,增加客服功能,以模板《今夕何夕模板》为例,在模板-公共模板变量添加变量,然后增加js,css,以及图片,步骤很简单,具体操作如下。



第一步,模板-公共模板变量-管理模板变量



第二步,增加一个模板变量kefu


要修改的地方就两处,一个是QQ号码,一个是微信图片地址。

html代码如下
1
2
3
4
5
6
7
8
9
10
11
12
<div class="kf">
  <h2><span id="closed"></span>客服在线</h2>
  <ul>
    <li><a href="http://wpa.qq.com/msgrd?v=3&amp;uin=476847113&amp;site=qq&amp;menu=yes" target="_blank" class="qqservice_list_link">QQ客服</a></li>
  </ul>
  <ul class="kfdh">
    <p class="kftext">客服微信扫码</p>
    <p class="kfnum"><img src="https://www.yangqq.com/skin/jxhx/images/wx.png"></p>
  </ul>
  <p class="kftext">服务时间</p>
  <p class="kftime">周一至周日 9:00-21:00</p>
</div>
第三步,返回公共模板变量,管理模板变量,复制[!--temp.kefu--]

第四步,粘贴到footer最后一行


第五步,修改js文件,在/skin/jxhx/js/comm.js 最后一个 }); 里面添加
1
2
3
$("#closed").click(function(){
    $(".kf").addClass("closed");
    });
如图

第六步,/skin/jxhx/css/base.css 增加css,代码如下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/*kf*/
.kf {positionfixed;right20px;top30%;color#fff;z-index999;background#212121;border#1c2327 3px solid;width150px;border-radius: 3px;text-aligncenter;}
.kf h2 {background#212121;font-size15px;color#FFF;font-weightnormal;line-height30px;padding-left5px;}
.kf h2 span { displayblockbackgroundurl(../images/close.gif) no-repeatwidth25pxheight25pxfloat:right }
.kf ul li { margin15px 0 0 0font-size14px }
.kf ul li span { margin0 5px }
.kf ul li img { display: inline-blockvertical-alignmiddle }
.kfdh { border-top1px solid #222222border-bottom1px solid #222222margin10px 0 }
.kftext {font-size12px;padding-left5px;padding-top5px;}
.kfnum img {margin10px auto 0;max-width:140px;}
p.kftime {font-size12px;text-aligncenter;padding5px 0 30px;}
.closed { displaynone }
a.qqservice_list_link { width80%;displayblocktext-aligncentermarginautopadding5px 0; border-radius: 5pxcolor#fff;background: linear-gradient(to right#2e74e5 0%#00c1de 100%);}
@media only screen and (max-width480px) {
 .kf{display:none}
}
第七步,保存close.gif图片到/skin/jxhx/images/
第八步,刷新后台,以及自己的浏览器缓存

评论列表暂无评论
发表评论取消回复
微信