给zblog php添加QQ、旺旺、二维码等在线客服功能的教程

zblog教程 9570

网页在线客服挂件是企业型网站、营销型网站以及服务型网站等众多类型站点都需要的小功能，而一般情况下很多zblog主题不会集成在线客服功能部分，虽然网上可以找到在线客服的代码，但大部分人不会使用，本篇教程博客吧将介绍如何在zblog php主题中集成在线客服代码。

给zblog php添加QQ、旺旺、二维码等在线客服功能的教程

1、创建一个文件，并命名为 kefu.js，然后添加下面的代码，然后上传kefu.js文件到当前主题的script/文件夹

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

function setCookie(objName, objValue, objHours) {
    var str = objName + "=" + escape(objValue);
    if (objHours > 0) {
        var date = new Date();
        var ms = objHours * 3600 * 1000;
        date.setTime(date.getTime() + ms);
        str += "; expires=" + date.toGMTString();
    }
    document.cookie = str;
}
function getCookie(objName) {
    var arrStr = document.cookie.split("; ");
    for (var i = 0; i < arrStr.length; i++) {
        var temp = arrStr[i].split("=");
        if (temp[0] == objName) return unescape(temp[1]);
    }
    return "";
}
function reMoveCookie(name){
	setCookie(name,1,-1);
}
$(function(){	
	if(getCookie('openState') == 'false'){			
		$('#widgets_wrap').addClass('widgets_small');
		$('.widgets_top span').addClass('widgets_hide');
		$('.widgets_top i').text('展开');
	}else if(getCookie('openState') == 'true'){			
		$('#widgets_wrap').removeClass('widgets_small');
		$('.widgets_top span').removeClass('widgets_hide');
		$('.widgets_top i').text('收起');			
	}
	$('.widgets_top').click(function(){	
		if(getCookie('openState') == 'false'){
			setCookie("openState","true",7);
		}else if(getCookie('openState') == 'true'){
			setCookie("openState","false",7);
		}else{
			setCookie("openState","true",7);
		}
		var $_text = $(this).children('i').text();
		$('#widgets_wrap').toggleClass('widgets_small');
		$(this).children('span').toggleClass('widgets_hide');
		if($_text == '收起'){
			$(this).children('i').text('展开');
		}else{
			$(this).children('i').text('收起');
		}
	});
	$('#widgets_backtop').click(function(){
		$('html,body').animate({scrollTop:0},500);
	});
	$('#weixin').hover(function(){
		$(this).children('span').show();
	},function(){
		$(this).children('span').hide();
	});
	$('#weixin').click(function(){
		$(this).children('span').fadeToggle('fast');
	});
});

2、把下面的图片保存到当前主题的style/images/文件夹（没有该文件夹则自己创建）：

展开按钮 返回顶部 QQ 淘宝旺旺 微信

3、编辑当前主题的template/footer.php文件，在</body>前添加以下代码，并把其中的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

<div id="widgets_wrap" class="widgets_wrap widgets_small">
	<div class="widgets_top">
		<span class="widgets_hide"></span>
		<i>展开</i>
	</div>
	<div class="widgets_main">
		<ul><li>
				<a rel="external nofollow" href="http://wpa.qq.com/msgrd?v=3&uin=10000&site=qq&menu=yes" target="_blank" title="QQ联系">
					<img src="{$host}zb_users/theme/{$theme}/style/images/qq.png" alt="QQ联系"/>
				</a>
		</li><li id="weixin">				
				<img src="{$host}zb_users/theme/{$theme}/style/images/weixin.png" alt="微信二维码"/>				
				<span>
					<img src="这里添加二维码图片地址" alt="微信二维码"/>
					手机扫描二维码
				</span>
			</li><li>
				<a rel="external nofollow" href="http://www.taobao.com/webww/ww.php?ver=3&touid=旺旺会员名&siteid=cntaobao&status=2&charset=utf-8" target="_blank" title="淘宝旺旺">
					<img src="{$host}zb_users/theme/{$theme}/style/images/wangwang.png" alt="淘宝旺旺"/>
				</a>
			</li><li id="widgets_backtop">				
				<img src="{$host}zb_users/theme/{$theme}/style/images/backtop.png" alt="返回顶部"/>				
			</li>
		</ul>
	</div>
</div>
<script type="text/javascript" src="{$host}zb_users/theme/{$theme}/script/kefu.js"></script>

4、把下面代码添加到主题style/下的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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97

.widgets_wrap,.widgets_small {
	padding: 0;
	margin: 0;
	width: 90px;
	height: auto;
	position: fixed;
	right: 10px;
	top: 40%;
	z-index: 99999;	
}
.widgets_small {
	width: 60px;
	top: auto;
	bottom: 0;
}
.widgets_wrap div,.widgets_small div {
	padding: 0;
	margin: 0;
}
.widgets_top {
	width: 100%;
	background-color: #E6E6E6;
	height: 30px;
	line-height: 30px;
	text-align: right;
	cursor: pointer;
	font-size:12px;
	font-family:'Microsoft Yahei';
}
.widgets_top i {
	font-style: normal;
}
.widgets_top span,.widgets_top .widgets_hide {
	background:url(../images/arrow.png) no-repeat 2px 4px;
    width: 10px;
    height: 30px;
    float: right;
    margin: 3px 10px 0 3px;
}
.widgets_top .widgets_hide {
	background-position: -28px 8px;
}
.widgets_main {
	border: 3px solid #E6E6E6;
	background-color: #fff;
}
.widgets_main ul {
	padding: 0;
	margin: 0;
	width: 100%;
}
.widgets_wrap .widgets_main ul li,.widgets_small ul li {
	padding: 0;
	margin: 0;
	list-style: none;
	padding: 20px 0;
	border-bottom: 2px solid #E6E6E6;
	cursor: pointer;
	position: relative;
}
.widgets_wrap.widgets_small ul li {
	padding: 5px 0;
}
.widgets_main ul li img {
	display: block;
	width: auto;
	max-width: 32px;
	_width: 32px;
	height: auto;
	margin:0 auto;
}
.widgets_small ul li img {
	max-width: 24px;
	_width: 24px;
}
#weixin span {
	position: absolute;
	right: 100%;
	bottom: 0;
	display: none;
	width: 100px;
	height: auto;
	font-size: 13px;
	text-align: center;
	background-color: #efefef;
	padding: 5px;
	border-radius: 4px;
	color: #333;
	border-right: 4px solid #e6e6e6;
}
#weixin span img {
	display: block;
	margin:0 auto 5px;
	width: 100%; 
	height: auto;
	max-width: 100%;
}

5、保存文件后，进入后台首页，点击[清空缓存并重新编译模板]即可。

博客吧把上面的代码做成了zblog php插件，不想自己动手的站长，可以自行到应用中心购买，2.8元小费，购买地址：widgets

精品推荐：