78模板网分享cms建站教程，提供网站模板、网站插件、办公模板等模板教程免费学习,找模板教程就上78模板网!

提交网址
站点导航

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

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

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

精美zblog弹窗在线客服插件kefu可以自行在自己使用的主题中根据下面的步骤添加代码。

添加教程：

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

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

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

<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 78模板网
Author Url: http://www.78moban.cn//
*/
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文件）

/*
Plugin By 78模板网
Plugin Url: https://www.78moban.cn
*/
/*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精美弹窗在线客服插件kefu

本文链接：http://78moban.cn/post/14642.html

版权声明：站内所有文章皆来自网络转载，只供模板演示使用，并无任何其它意义！

上一篇：Zblog建站之旅 Zblog 教程分享 包含做模板和仿站以及采集 b11693

下一篇：zblog用户中心插件YtUser使用教程

相关推荐

robot

  • 文章 2135
  • 评论 0
  • 访问 440378

热门排行

最新发布

联系技术
文章删除 友链合作 技术交流群
1050177837
公众号
公众号
公众号
返回顶部