如何为网站加入QQ客服代码

QQ客服联系方式代码
css代码放入https://hao-blog.com/style/下的mykefu.css文件中;具体路径可自定义。

css代码
/*html {overflow-x:hidden;}*/
.custom_service p img {display: inline; vertical-align:middle;}
.scrollsidebar{position:absolute; z-index:999; top:350px;right:0}
.side_content{width:154px; height:auto; overflow:hidden; float:left; }
.side_content .side_list {width:154px;overflow:hidden;}
.show_btn{ width:0; height:112px; overflow:hidden; margin-top:50px; float:left; cursor:pointer;}
.show_btn span { display:none;}
.close_btn{width:24px;height:24px;cursor:pointer;}
.side_title,.side_bottom,.close_btn,.show_btn {background:url(../images/mykehu/sidebar_bg.png) no-repeat;}
.side_title {height:46px;}
.side_bottom { height:8px;}
.side_center {font-family:Verdana, Geneva, sans-serif; padding:5px 12px; font-size:12px;}
.close_btn { float:right; display:block; width:21px; height:16px; margin:16px 10px 0 0; _margin:16px 5px 0 0;}
.close_btn span { display:none;}
.side_center .custom_service p { text-align:center; padding:6px 0; margin:0; vertical-align:middle;}
.other { text-align:center;border-bottom:1px solid #ddd;border-top:1px solid #ddd}
.other p { padding:5px 0; _height:16px; margin:0;color: #666666;}
.msgserver { text-align:center; margin-bottom:5px;}
.msgserver a { background:url(../images/mykehu/sidebar_bg.png) no-repeat -119px -115px; padding-left:22px;}
/* blue skin as the default skin */
.side_title, .side_blue .side_title {background-position:-195px 0;}
.side_center, .side_blue .side_center {background:url(../images/mykehu/blue_line.png) repeat-y center;}
.side_bottom, .side_blue .side_bottom {background-position:-195px -50px;}
.close_btn, .side_blue .close_btn {background-position:-44px 0;}
.close_btn:hover, .side_blue .close_btn:hover {background-position:-66px 0;}
.show_btn , .side_blue .show_btn {background-position:-119px 0;}
.msgserver a, .side_blue .msgserver a {color:#06C;}
/* green skin */
.side_green .side_title {background-position:-349px 0;}
.side_green .side_center {background:url(../images/mykehu/green_line.png) repeat-y center;}
.side_green .side_bottom {background-position:-349px -50px;}
.side_green .close_btn {background-position:-44px -23px;}
.side_green .close_btn:hover {background-position:-66px -23px;}
.side_green .show_btn {background-position:-147px 0;}
.side_green .msgserver a {color:#76a20c;}

js代码放入https://hao-blog.com/style/下的mykefu.js文件中;具体路径可自定义。

js代码
!(function() {
var serviceOnline = (function() {
var sideContent = document.querySelector(".side_content");
var show_btn = document.querySelector(".show_btn");
var close_btn = document.querySelector(".close_btn");
var timer = null;
var startMove = function(argument) {
var scrollsidebar = document.getElementById("scrollsidebar");
clearInterval(timer);
timer = setInterval(function() {
var speed = (argument - scrollsidebar.offsetTop) / 4;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if (argument == scrollsidebar.offsetTop) {
clearInterval(timer);
} else {
scrollsidebar.style.top = scrollsidebar.offsetTop + speed + "px";
}
}, 20);
};
var scrollMove = function() {
window.onscroll = window.onload = function() {
var scrollsidebar = document.getElementById("scrollsidebar");
var scrolltop =
document.body.scrollTop || document.documentElement.scrollTop;
startMove(
parseInt(
(document.documentElement.clientHeight -
scrollsidebar.offsetHeight) /2 +scrolltop
)
);
};
};
var slideShow = function() {
if (!show_btn) return false;
show_btn.addEventListener(
"click",
function() {
show_btn.style.width = 0;
sideContent.style.width = "154px";
},
false
);
};
var slideClose = function() {
if (!close_btn) return false;
close_btn.addEventListener(
"click",
function() {
console.log(this);
sideContent.style.width = 0;
show_btn.style.width = "25px";
},
false
);
};
return {
init: function() {
scrollMove();
slideClose();
slideShow();
}
};
})();
serviceOnline.init();
})();

以下html代码放入footer.html或footer.php等文件中,该文件中引入的mykefu.css和mykefu.js文件必须引入在以下代码中。

html代码
<link rel="stylesheet" type="text/css" href="https://hao-blog.com/style/mykefu.css">
<div class="scrollsidebar" id="scrollsidebar">
<div class="side_content">
<div class="side_list">
<div class="side_title"><a title="隐藏" class="close_btn"><span>关闭</span></a></div>
<div class="side_center">
<div class="custom_service">
<p> <a href="http://wpa.qq.com/msgrd?v=3&uin=2690502116&site=qq&menu=yes" target="_blank"><img border="0" src="http://wpa.qq.com/pa?p=2:2690502116:51" alt="点击这里给我发消息" title="点击这里给我发消息"/></a>
</p>
</div>
<div class="other">
<p><img src="https://hao-blog.com/images/mykehu/weixin.png" width="120" alt="请扫码加微信咨询" title="请扫码加微信咨询"/></p>
<p>客户服务热线</p>
<p>这里填写联系电话</p>
</div>
<div class="msgserver">
<p><a href="https://hao-blog.com/contactus/" >联系我们</a></p>
</div>
</div>
<div class="side_bottom"></div>
</div>
</div>
<div class="show_btn"><span>在线客服</span></div>
</div>
<script type="text/javascript" src="https://hao-blog.com/style/mykefu.js"></script>

以上的js、css代码都可以嵌套在html中,但对于SEOer来说,这对搜索引擎不太友好,所以通过外部样式引入是有必要的。

点赞

发表评论

电子邮件地址不会被公开。必填项已用 * 标注!昵称可为公司名称哦!SEO优化、网站诊断分析方案请联系微信/QQ:2690502116。