【本站通知】:提交网址请到顶部提交收录按钮提交,电脑版不能自动获取网站信息,请手动填写! ——广告合作:点击这里给我发消息 官方1群:加入QQ群 官方2群:加入QQ群
电影大全 博客大全 百度秒收录 导航大全 审核状态 优秀站点

当前位置:首页 » 网站源码 » zblog博客教程 » 详情

精美zblog弹窗在线客服插件kefu

kefu插件是一款当访客打开网站时弹出在线客服窗口的zblog插件。可以展示联系电话、工作时间、售前咨询和售后咨询四个服务信息,支持QQ和微信两种联系方式;可自由添加客服人员,支持自定义客服头像、称呼、QQ、微信二维码;点击关闭图标可以缩小至窗口右下角;响应式结构,可以自适应小屏幕访问设备;兼容IE9+、Firefox、Chrome、safari等主流浏览器,整体样式设计精美,符合大部分网站的设计风格。

精美zblog弹窗在线客服插件kefu

插件价格28元,购买地址在本篇文章结尾,舍不得花钱购买的可以自行在自己使用的主题中根据下面的步骤添加代码。

添加教程:

1、如果主题没有引用jquery库文件,请先引用jquery库文件;

2、把下面的代码添加到网页的</body>代码前面:(一般在footer.php文件)

PS:请自行替代代码中的QQ号

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<div class="kfPopup"> <div class="kfBox"> <div class="kfMain"> <div class="top"> <div class="tel"> 13764618666 </div> <div class="time"> 9:00 - 18:00 </div> <div class="kfBtn"> <span class="open"><a href="javascript:void(0);"></a></span> <span class="close"><a href="javascript:void(0);"></a></span> </div> </div> <div class="btm"> <dl class="before"> <dt>售前咨询</dt> <dd> <span class="left"><i style="background-image:url(../images/women.png);"></i>刘小姐</span> <span class="right"><a rel="nofollow" target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=1376461&site="><i class="qq"></i><em>QQ联系</em></a> <a class="kfwx" href="../upload/qrcode.png" rel="nofollow"><i class="wx"></i><em>微信联系</em></a></span> </dd> <dd> <span class="left"><i style="background-image:url(../images/man.png);"></i>李小姐</span> <span class="right"><a rel="nofollow" target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=1376461&site="><i class="qq"></i><em>QQ联系</em></a> <a class="kfwx" href="../upload/qrcode.png" rel="nofollow"><i class="wx"></i><em>微信联系</em></a></span> </dd> <dd> <span class="left"><i style="background-image:url(../images/women.png);"></i>刘小姐</span> <span class="right"><a rel="nofollow" target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=1376461&site="><i class="qq"></i><em>QQ联系</em></a> <a class="kfwx" href="../upload/qrcode.png" rel="nofollow"><i class="wx"></i><em>微信联系</em></a></span> </dd> </dl>   <dl class="after"> <dt>售后咨询</dt> <dd> <span class="left"><i style="background-image:url(../images/women.png);"></i>刘小姐</span> <span class="right"><a rel="nofollow" target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=1376461&site="><i class="qq"></i><em>QQ联系</em></a> <a class="kfwx" href="../upload/qrcode.png" rel="nofollow"><i class="wx"></i><em>微信联系</em></a></span> </dd> <dd> <span class="left"><i style="background-image:url(../images/man.png);"></i>李小姐</span> <span class="right"><a rel="nofollow" target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=1376461&site="><i class="qq"></i><em>QQ联系</em></a> <a class="kfwx" href="../upload/qrcode.png" rel="nofollow"><i class="wx"></i><em>微信联系</em></a></span> </dd> <dd> <span class="left"><i style="background-image:url(../images/man.png);"></i>李小姐</span> <span class="right"><a rel="nofollow" target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=1376461&site="><i class="qq"></i><em>QQ联系</em></a> <a class="kfwx" href="../upload/qrcode.png" rel="nofollow"><i class="wx"></i><em>微信联系</em></a></span> </dd> </dl> <div class="clear"></div> </div>   </div> </div> <div class="kfWechat"> <div class="kfClose"></div> <div class="kfTitle"> 微信扫一扫 </div> <div class="kfQrcode"></div> <div class="kfText"> <p>微信里点“发现”,扫一下</p> <p>二维码添加好友后联系我们</p> </div> </div> </div> <script type="text/javascript"> /*
Plugin by 博客吧
Author Url: http://www.boke8.net/
*/
function setCookie(cname, cvalue, exdays){
	var day = new Date();
	day.setTime(day.getTime() + exdays*24*60*60*1000);
	var expires = 'expires = ' + day.toUTCString();
	document.cookie = cname + '=' + escape(cvalue) + ';' + expires + ';path=/'; 
}
function getCookie(cname){	
	var arrayStr = document.cookie.split('; ');
	for (var i=0; i<arrayStr.length; i++){  var temp = arrayStr[i].split('=');   if(temp[0] == cname) return unescape(temp[1]);  } }   $(function(){  $(window).resize(function(){  var _height = $(window).height() * 0.7 - 10;  $('.kfBox .btm').css('maxHeight',_height);  $('.kfBox dl .kfClear').remove();  if($('body').width() > 640){
			$('.kfBox dl .kfClear').remove();
		}else if($('body').width() > 460){
			$('.kfBox dl .kfClear').remove();
			$('.kfBox dd:nth-child(2n-1)').after('<div class="kfClear"></div>');
		}else{
			$('.kfBox dl .kfClear').remove();
			$('.kfBox dd:nth-child(3n+1)').after('<div class="kfClear"></div>');
		}
	}).trigger('resize');
	setTimeout(function(){
		$('.kfMain').addClass('show');
	},100);	
	$('.kfBtn a').click(function(){
		var _this = $(this).parent();
		var _class = _this.attr('class');
		_this.hide().siblings().show();
		if(_class == 'close'){
			$('.kfPopup').addClass('narrow');
			$('.kfBox .btm').hide();
			setCookie('kfStatus','close','1');
		}else if(_class == 'open'){
			$('.kfPopup').removeClass('narrow');
			setCookie('kfStatus','open','1');
			setTimeout(function(){
				$('.kfBox .btm').slideDown('fast');
			},330);
		}
	});
	if(getCookie('kfStatus') == 'close'){	
		$('.kfPopup').addClass('narrow');
		$('.kfBox .btm').hide();
		$('.kfBtn .open').show().siblings().hide();
	}else{
		$('.kfPopup').removeClass('narrow');
		$('.kfBtn .open').hide().siblings().show();
	}
 
	$('.kfBox .kfwx').click(function(e){
		e.preventDefault();
		var qrcode = $(this).attr('href');
		var img = '<img src="'+qrcode+'" alt="微信扫一扫"/>';
		$('.kfQrcode').html(img).parents('.kfWechat').fadeIn('fast');
	});
	$('.kfWechat .kfClose').click(function(){
		$(this).parent().hide();
	});	
}); </script>

3、在主题的css文件添加以下代码:(一般是style.css文件)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
/*
Plugin By 博客吧
Plugin Url: https://www.boke8.net/zblog-kefu-plugin.html
*/ /*kfPopup*/ .kfClear {clear:both; width:100%;} .kfPopup {position:fixed; left:0; bottom:0; background-color:rgba(0,0,0,.3); width:100%; height:100%; z-index:10;} .narrow {bottom:0; background:none; width:auto; height:auto;} .narrow .kfBox {width:200px; right:0; bottom:0; margin-right:0; transform:none;} .narrow .kfBox .top {padding:0 15px;} .narrow .kfBox .tel {padding-left:20px;} .narrow .kfBox .kfMain {border-radius:5px 5px 0 0;} .narrow .kfBtn {right:15px;} .kfBox {width:720px; position:fixed; right:50%; bottom:50%; margin-right:-360px; transform:translateY(50%); transition:all .3s;} .kfBox .kfMain {background-color:#fff; box-shadow:1px 1px 50px rgba(0,0,0,.3); border-radius:5px 5px 10px 10px; overflow:hidden; transform:scale(0); transition:transform .3s;} .kfBox .kfMain.show {transform:scale(1);} .kfBox .top {background-color:#1e3988; background:linear-gradient(45deg,#1e3988 0, rgba(232, 155, 95, 0.96) 100%); height:47px; line-height:47px; color:#fff; padding:0 20px; font-size:16px; overflow:hidden; position:relative;} .kfBox .tel {background:url(images/kf_phone.png) no-repeat left center; padding-left:25px; float:left;} .kfBox .time {float:right; padding-right:25px;} .kfBtn {position:absolute; right:20px; top:15.5px;} .kfBtn span {display:block; float:left;} .kfBtn a {display:block; width:16px; height:16px; background:no-repeat center center; background-size:contain;} .kfBtn a:hover {opacity:.85;} .kfBtn .close a {background-image:url(images/kf_close.png);} .kfBtn .open {display:none;} .kfBtn .open a {background-image:url(images/kf_open.png);} .kfBox .btm {position:relative; padding:20px; overflow-y:auto;} .kfBox dl {float:left; width:45%; position:relative;} .kfBox dl.after {float:right;} .kfBox dt {font-size:18px; color:#000; line-height:1.875em; margin-bottom:5px;} .kfBox dd {font-size:14px; color:#4c4c4c; overflow:hidden; clear:both; padding:10px 0;} .kfBox dd span {display:block;} .kfBox dd a {display:inline-block; width:80px; padding:0 10px; height:30px; line-height:28px; background-color:#0a8bc0; border-radius:5px; color:#fff; margin-left:10px;} .kfBox dd a:hover {opacity:.85;} .kfBox dd i {display:inline-block; vertical-align:middle; background:no-repeat center center; background-size:contain;} .kfBox .left {line-height:30px; float:left;} .kfBox .left i {margin-right:7px; width:23px; height:30px;} .kfBox .right {float:left;} .kfBox .right i {width:16px; height:18px; margin-right:5px;} .kfBox .right em {font-style:normal; display:inline-block; vertical-align:middle;} .kfBox .right .qq {background-image:url(images/kf_qq.png);} .kfBox .right .wx {background-image:url(images/kf_wx.png);} .kfWechat {background-color:#fff; box-shadow:0px 0px 8px #666; position:fixed; left:50%; top:50%; width:200px; height:auto; margin-left:-100px; transform:translateY(-50%); border-radius:5px; overflow:hidden; display:none;} .kfWechat .kfTitle {color:#777; background-color:#f3f3f3; height:30px; line-height:30px; font-size:12px; text-align:center; margin-bottom:15px;} .kfWechat .kfQrcode {padding:0 30px; background-color:#fff;} .kfWechat .kfQrcode img {display:block; width:100%; height:100%; margin:0 auto;} .kfWechat .kfText {font-size:12px; text-align:center; color:#666; line-height:1.5em; padding:5px 0;} .kfWechat .kfClose {width:12px; height:12px; background:url(images/kf_close2.png) no-repeat center center; background-size:contain; position:absolute; right:10px; top:9px; cursor:pointer; opacity:.85;} @media only screen and (max-width:960px){ .kfBox {width:640px; margin-right:-320px;} .kfBox dt {font-size:16px; margin-bottom:0;} .kfBox dd {padding:5px 0;} .kfBox dd a {font-size:12px; width:70px; line-height:29px; margin-left:5px;} } @media only screen and (max-width:768px){ .kfBox {width:580px; margin-right:-290px;} .kfBox .top {padding:0 10px; height:40px; line-height:40px; font-size:14px;} .kfBox .tel {background-size:auto 14px; padding-left:20px;} .kfBox .btm {padding:10px; margin-bottom:10px;} .kfBox dl{width:50%;} .kfBox dd a {height:28px; line-height:28px;} .kfBox .left {line-height:28px;} .kfBox .left i {width:15px; height:20px; margin-right:5px;} .kfBtn {right:10px; top:12px;} } @media only screen and (max-width:640px){ .kfBox {width:90%; margin-right:-45%;} .kfBox .left, .kfBox .right {float:none;} .kfBox dd {width:50%; float:left; clear:none; padding:0;} .kfBox dd a {margin-left:0; margin-bottom:5px; display:block;} } @media only screen and (max-width:460px){ .kfBox dl, .kfBox dl.after {width:auto; float:none; clear:both;} .kfBox dt {text-align:center;} .kfBox dd {width:33.333%; text-align:center;} .kfBox dd a {padding:0 5px; margin:0 auto 5px;} }

4、按以下命名及尺寸自行准备“QQ、微信、关闭、展开、电话”的图标(可以去iconfont下载),并添加至主题的images文件夹:

PS:如果css文件和images文件夹不在同一路径,请自行修改上面CSS代码中的url路径。

  • QQ – kf_qq.png(尺寸:16 × 18)
  • 微信 – kf_wx.png(尺寸:16 × 18)
  • 关闭 – kf_close.png(尺寸:16 × 16)
  • 关闭 – kf_close2.png(尺寸:16 × 16)
  • 展开 – kf_open.png(尺寸:16 × 16)
  • 电话 – kf_phone.png(尺寸:16 × 16)

5、保存文件后,在zblog网站后台首页,点击“[清空缓存并重新编译模板]”即可生效。

打赏站长

打赏方式:

X
  • 支付宝
  • 微信
  • QQ红包

打开支付宝扫一扫
文章作者:站长的小便 日期:2019年12月03日 星期二   分类:zblog博客教程   浏览(22)
本文地址:https://www.laolibab.cn/zblogjc/11510.html   [百度已收录]
短网址: [复制短网址]
声明:本页信息由网友自行发布或来源于网络,真实性、合法性由发布人负责,请仔细甄别!本站只为传递信息,我们不做任何双方证明,也不承担任何法律责任。文章内容若侵犯你的权益,请联系本站删除!

相关阅读

留言咨询

自动获取QQ

昵称

邮箱

网址

寻元素 - 专注免抠png素材设计网站

    寻元素 - 专注免抠png素材设计网站

老李云

    老李云

代刷秒赞广告位

    第一领券网,福利多多,优惠满满

协助本站seo优化,点击百度一下

    百度一下

二维码在线生成

关于我们

    站长导航网提供网站SEO优化、SEM推广营销(百度/360/搜狗收录优化)、企业建站、搜索引擎教学等服务。
    联系我们:给我发QQ消息 加入QQ群

站点统计

  • 收录网址:2973 个
  • 黑名单:62 个
  • 发布文章:7056 条
  • 总访问量:8789277次
  • 评论总数:3341 条
  • 用户总数:237
  • 本站运行:4年11月28天
展开
关闭 提交收录 审核状态 SEO实战 SEO外链 在线工具 在线音乐 模板之家 线报之家 资源大全 骗子公布 登录&注册
sitemap