给zblog php添加QQ、旺旺、二维码等在线客服功能的教程
网页在线客服挂件是企业型网站、营销型网站以及服务型网站等众多类型站点都需要的小功能，而一般情况下很多zblog主题不会集成在线客服功能部分，虽然网上可以找到在线客服的代码，但大部分人不会使用，本篇教程博客吧将介绍如何在zblog php主题中集成在线客服代码。
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/文件夹（没有该文件夹则自己创建）：
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、保存文件后，进入后台首页，点击[清空缓存并重新编译模板]即可。
本文链接：https://h.finchui.com/zblogcn/1381.html 转载需授权！
在线咨询