网页在线客服挂件是企业型网站、营销型网站以及服务型网站等众多类型站点都需要的小功能，而一般情况下很多zblog主题不会集成在线客服功能部分，虽然网上可以找到在线客服的代码，但大部分人不会使用，本篇教程趣主题将介绍如何在zblog php主题中集成在线客服代码。
1、创建一个文件，并命名为 kefu.js，然后添加下面的代码，然后上传kefu.js文件到当前主题的script/文件夹
| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960 | 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号、旺旺会员名、微信二维码地址更改为自己的
| 123456789101112131415161718192021222324252627 | <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）：
| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697 | .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
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
评论(0)