一款不錯(cuò)的右邊小客服掛件（帶QQ、微信、商橋、電話(huà)、分享）

[重要通告]如您遇疑難雜癥,本站支持知識(shí)付費(fèi)業(yè)務(wù),掃右邊二維碼加博主微信,可節(jié)省您寶貴時(shí)間哦!

今天在看一家用友的站點(diǎn)，發(fā)現(xiàn)右邊的掛件不錯(cuò)，就順便扒了以下，也給自己以后用留下點(diǎn)意思兒；具體看圖，至于代碼，網(wǎng)上也有，也可以搜索到；

把以下代碼放在你想放在的位置，一般放在頁(yè)腳下即可

<div class="side">
<ul>
<li id="qqonline"><a  target="_blank" rel="nofollow"><i class="bgs1"></i>售前咨詢(xún)</a></li>
<li class="shangqiao">
<a  target="_blank" rel="nofollow">
<div><i class="bgs1"></i>技術(shù)咨詢(xún)</div>
</a>
</li>
<li class="sideewm"><i class="bgs3"></i>微信客服
<div class="ewBox son"></div>
</li>
<li class="sideetel"><i class="bgs4"></i>聯(lián)系電話(huà)
<div class="telBox son">
<dd class="bgs1"><span>咨詢(xún)電話(huà)</span>13888888888</dd>
<dd class="bgs2"><span>投訴電話(huà)</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>

把以下代碼丟進(jìn)你站點(diǎn)的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下載了，按照你所設(shè)置的路徑丟進(jìn)去即可；

掛件下載點(diǎn)我即可

問(wèn)題未解決？付費(fèi)解決問(wèn)題加Q或微信 2589053300 (即Q號(hào)又微信號(hào))右上方掃一掃可加博主微信

所寫(xiě)所說(shuō)，是心之所感，思之所悟，行之所得；文當(dāng)無(wú)敷衍，落筆求簡(jiǎn)潔。 以所舍，求所獲；有所依，方所成！