一款不错的右边小客服挂件（带QQ、微信、商桥、电话、分享）

[全站通告] 想快速节省您的时间并可接受付费的朋友，可扫右边二维码加博主微信-非诚勿扰！

今天在看一家用友的站点，发现右边的挂件不错，就顺便扒了以下，也给自己以后用留下点意思儿；具体看图，至于代码，网上也有，也可以搜索到；

把以下代码放在你想放在的位置，一般放在页脚下即可

<div class="side">
<ul>
<li id="qqonline"><a href="http://wpa.qq.com/msgrd?v=3&amp;uin=2589860066&amp;site=keyou&amp;menu=yes&amp;site=keyou&amp;menu=yes" target="_blank" rel="nofollow"><i class="bgs1"></i>售前咨询</a></li>
<li class="shangqiao">
<a href="http://wpa.qq.com/msgrd?v=3&amp;uin=2589860066&amp;site=keyou&amp;menu=yes" target="_blank" rel="nofollow">
<div><i class="bgs1"></i>技术咨询</div>
</a>
</li>
<li class="sideewm"><i class="bgs3"></i>微信客服
<div class="ewBox son"></div>
</li>
<li class="sideetel"><i class="bgs4"></i>联系电话
<div class="telBox son">
<dd class="bgs1"><span>咨询电话</span>13888888888</dd>
<dd class="bgs2"><span>投诉电话</span>13999999999</dd>
</div>
</li>
<li class="fenxiang"><i class="bgs5"></i>一键分享

<div class="bdsharebuttonbox" data-tag="share_1">
<a class="ttqq" data-cmd="sqq" title="分享到QQ好友"></a>
<a class="ttwx" data-cmd="weixin" href="javascript:;"></a>
<a class="ttqzone" data-cmd="qzone"></a>
<a class="ttsina" data-cmd="tsina"></a>
<a class="tthuaban" data-cmd="huaban"></a>
<a class="ttfbook" data-cmd="fbook"></a>
<div id="fxcode">
<div class="f fxjg">分享到微信朋友圈</div>
<div id="fxcolse" class="r fxjg"><b>X</b></div>
<canvas width="100" height="100"></canvas></div>
</div>

<script src="/themes/keyou/js/jquery.qrcode.min.js"></script>

<script>
var sharrul = window.location.href;
var shartitle = "老梁博客：VX2589053300";
var sharpic = "";

jQuery('#fxcode').qrcode({
render: "canvas",
width:100,
height:100,
text: sharrul
});

$(".ttwx").click(function () { $("#fxcode").css("display", "block") }); $("#fxcolse").click(function () { $("#fxcode").css("display", "none") }); $(".ttqq").click(function () { shareqq(shartitle, sharrul, sharpic) }); $(".ttqzone").click(function () { shareToQq(shartitle, sharrul, sharpic) }); $(".ttsina").click(function () { shareToXl(shartitle, sharrul, sharpic) }); $(".tthuaban").click(function () { sharehuaban(shartitle, sharrul, sharpic) }); $(".ttfbook").click(function () { sharefb(shartitle, sharrul, sharpic) }); function shareqq(title, url, picurl) { var shareqqzonestring = 'https://connect.qq.com/widget/shareqq/index.html?summary=' + title + '&url=' + url + '&pics=' + picurl; window.open(shareqqzonestring, 'newwindow', 'height=595,width=785,top=100,left=100') } function shareToQq(title, url, picurl) { var shareqqzonestring = 'https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?title=' + title + '&url=' + url + '&pics=' + picurl; window.open(shareqqzonestring, 'newwindow', 'height=400,width=400,top=100,left=100') } function shareToXl(title, url, picurl) { var sharesinastring = 'http://v.t.sina.com.cn/share/share.php?title=' + title + '&url=' + url + '&content=utf-8&sourceUrl=' + url + '&pic=' + picurl; window.open(sharesinastring, 'newwindow', 'height=400,width=400,top=100,left=100') } function sharehuaban(title, url, picurl) { var sharesinastring = 'https://huaban.com/bookmarklet/?title=' + title + '&url=' + url + '&content=utf-8&sourceUrl=' + url + '&media=' + picurl; window.open(sharesinastring, 'newwindow', 'height=400,width=400,top=100,left=100') } function sharefb(title, url, picurl) { var sharesinastring = 'https://www.facebook.com/share.php?t=' + title + '&u=' + url + '&content=utf-8&sourceUrl=' + url + '&pic=' + picurl; window.open(sharesinastring, 'newwindow', 'height=400,width=400,top=100,left=100') }
</script>
</li>
<li class="sidetop" onclick="goTop()"><i class="bgs6"></i>返回顶部</li>
</ul>
</div>

把以下代码丢进你站点的css里

.side{position:fixed;width:78px;right:0;top:50%;margin-top:-200px;z-index:100;border:1px solid #e0e0e0;background:#fff;border-bottom:0}
.side ul li{width:78px;height:78px;float:left;position:relative;border-bottom:1px solid #e0e0e0;color:#333;font-size:14px;line-height:38px;text-align:center;transition:all .3s;cursor:pointer}
.side ul li:hover{background:#e60015;color:#fff}
.side ul li:hover a{color:#fff}
.side ul li i{height:25px;margin-bottom:1px;display:block;overflow:hidden;background-repeat:no-repeat;background-position:center center;background-size:auto 25px;margin-top:14px;transition:all .3s}
.side ul li i.bgs1{background-image:url(../images/kefu/right_pic5.png)}
.side ul li i.bgs2{background-image:url(../images/kefu/right_pic7.png)}
.side ul li i.bgs3{background-image:url(../images/kefu/right_pic2.png)}
.side ul li i.bgs4{background-image:url(../images/kefu/right_pic1.png)}
.side ul li i.bgs5{background-image:url(../images/kefu/right_pic3.png)}
.side ul li i.bgs6{background-image:url(../images/kefu/right_pic6_on.png)}
.side ul li:hover i.bgs1{background-image:url(../images/kefu/right_pic5_on.png)}
.side ul li:hover i.bgs2{background-image:url(../images/kefu/right_pic7_on.png)}
.side ul li:hover i.bgs3{background-image:url(../images/kefu/right_pic2_on.png)}
.side ul li:hover i.bgs4{background-image:url(../images/kefu/right_pic1_on.png)}
.side ul li:hover i.bgs5{background-image:url(../images/kefu/right_pic3_on.png)}
.side ul li .sidebox{position:absolute;width:78px;height:78px;top:0;right:0;transition:all .3s;overflow:hidden}
.side ul li.sidetop{background:#e60015;color:#fff}
.side ul li.sidetop:hover{opacity:.8;filter:Alpha(opacity=80)}
.side ul li.sideewm .ewBox.son{width:238px;display:none;color:#363636;text-align:center;padding-top:235px;position:absolute;left:-240px;top:0;background-image:url(../images/kefu/weixinkefu.jpg);background-repeat:no-repeat;background-position:center center;border:1px solid #e0e0e0; background-color:#fff;}
.side ul li.sideetel .telBox.son{width:240px;height:237px;display:none;color:#fff;text-align:left;position:absolute;left:-240px;top:-79px;background:#e60015}
.side ul li.sideetel .telBox dd{display:block;height:118.5px;overflow:hidden;padding-left:82px;line-height:24px;font-size:18px}
.side ul li.sideetel .telBox dd span{display:block;line-height:28px;height:28px;overflow:hidden;margin-top:32px;font-size:18px}
.side ul li.sideetel .telBox dd.bgs1{background:url(../images/kefu/right_pic8.png) 28px center no-repeat;}
.side ul li.sideetel .telBox dd.bgs2{background:url(../images/kefu/right_pic9.png) 28px center no-repeat}

把以下图片js下载了，按照你所设置的路径丢进去即可；

挂件下载点我即可

问题未解决？付费解决问题加Q或微信 2589053300 (即Q号又微信号)右上方扫一扫可加博主微信

所写所说，是心之所感，思之所悟，行之所得；文当无敷衍，落笔求简洁。 以所舍，求所获；有所依，方所成！