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

zblog插件 4489

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网站后台首页，点击“[清空缓存并重新编译模板]”即可生效。

插件购买：Zblog官方应用中心（28元/份）

精品推荐：