如何在网站右侧添加浮动的客服代码！

话不多说，我的网站（https://www.yephy.com）右下方添加了浮动的企鹅头像，点击它就可以直接跳出弹窗提示你可以与我QQ对话，怎么样，这样的浮动装口，配上 Chakhsu Lau 的 Pinghsu 清新主题，是不是没有像那种模版站一样给人感觉很难看？
下面，我就给大家讲一下具体的实施方法：

在你的网站主题中，找到一个被全站调用的文件，通常情况下，我会选择 footer.php 文件，找到它之后，以 utf-8 方式进行编译，在 </body> 上一行，加入如下代码：

<style>.animated{-webkit-animation-duration:.5s;animation-duration:.5s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.livechat-girl{width:60px;height:60px;border-radius:50%;position:fixed;top:80%;right:40px;opacity:0;-webkit-box-shadow:0 5px 10px 0 rgba(35,50,56,0.3);box-shadow:0 5px 10px 0 rgba(35,50,56,0.3);z-index:700;transform:translateY(0);-webkit-transform:translateY(0);-ms-transform:translateY(0);cursor:pointer;-webkit-transition:all 1s cubic-bezier(0.86,0,0.07,1);transition:all 1s cubic-bezier(0.86,0,0.07,1)}.livechat-girl:focus{outline:0}.livechat-girl.animated{opacity:1;transform:translateY(-40px);-webkit-transform:translateY(-40px);-ms-transform:translateY(-40px)}.livechat-girl:after{content:'';width:12px;height:12px;border-radius:50%;background-image:linear-gradient(to bottom,#38dc79,#1ab744);position:absolute;right:1px;top:1px;z-index:50}.livechat-girl .girl{position:absolute;top:0;left:0;width:100%;height:auto;z-index:50;border-radius:100%}.livechat-girl .animated-circles .circle{background:rgba(26,183,68,0.25);width:60px;height:60px;border-radius:50%;position:absolute;z-index:49;transform:scale(1);-webkit-transform:scale(1)}.livechat-girl .animated-circles.animated .c-1{animation:2000ms scaleToggleOne cubic-bezier(0.25,0.46,0.45,0.94) forwards}.livechat-girl .animated-circles.animated .c-2{animation:2500ms scaleToggleTwo cubic-bezier(0.25,0.46,0.45,0.94) forwards}.livechat-girl .animated-circles.animated .c-3{animation:3000ms scaleToggleThree cubic-bezier(0.25,0.46,0.45,0.94) forwards}.livechat-girl.animation-stopped .circle{opacity:0 !important}.livechat-girl .livechat-hint{position:absolute;right:40px;top:50%;margin-top:-20px;opacity:0;z-index:0;-webkit-transition:all 0.3s cubic-bezier(0.86,0,0.07,1);transition:all 0.3s cubic-bezier(0.86,0,0.07,1);background-color:#1ab744}.livechat-girl .livechat-hint.show_hint{-webkit-transform:translateX(-40px);transform:translateX(-40px);opacity:1}.livechat-girl .livechat-hint.hide_hint{opacity:0;-webkit-transform:translateX(0);transform:translateX(0)}.rd-notice-tooltip{-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.2);box-shadow:0 2px 2px rgba(0,0,0,0.2);font-size:14px;border-radius:3px;line-height:1.25;position:absolute;z-index:65;max-width:350px}.rd-notice-tooltip.thumb-heart-tooltip{z-index:100;margin-top:19px}.rd-notice-tooltip.thumb-heart-tooltip .rd-notice-content{padding:10px 20px}.rd-notice-tooltip:after{position:absolute;display:block;content:'';height:20px;width:20px;-webkit-box-shadow:none;box-shadow:none;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;z-index:50;top:10px;right:-6px;background-color:#1ab744}.rd-notice-tooltip .rd-notice-content{background:0;border-radius:3px;width:100%;color:#fff;position:relative;z-index:60;padding:20px;font-weight:400;line-height:1.45}.rd-notice-tooltip .rd-notice-content a{color:#fff;text-decoration:underline}.rd-notice-tooltip .arrow{display:none !important}.rd-notice-tooltip.alert.rd-closing{white-space:normal;text-align:left}.rd-notice-tooltip.alert.rd-closing .rd-notice-content{padding-right:50px}.rd-notice-tooltip.single-line .rd-notice-content{height:40px;padding:0 20px;line-height:40px;white-space:nowrap}@keyframes scaleToggleOne{from{transform:scale(1);-webkit-transform:scale(1)}50%{transform:scale(2);-webkit-transform:scale(2)}100%{transform:scale(1);-webkit-transform:scale(1)}}@keyframes scaleToggleTwo{0%{transform:scale(1);-webkit-transform:scale(1)}20%{transform:scale(1);-webkit-transform:scale(1)}60%{transform:scale(2);-webkit-transform:scale(2)}100%{transform:scale(1);-webkit-transform:scale(1)}}@keyframes scaleToggleThree{0%{transform:scale(1);-webkit-transform:scale(1)}33%{transform:scale(1);-webkit-transform:scale(1)}66%{transform:scale(2);-webkit-transform:scale(2)}100%{transform:scale(1);-webkit-transform:scale(1)}}</style>
<a class="livechat-girl js-livechat-girl animated" id="lc-girl-block-en_2" href="http://wpa.qq.com/msgrd?v=3&uin=252112645&site=qq&menu=yes" target="_blank">![点击这里给我发消息](http://cdn.yephy.com/image/kfh.png)
  <div class="js-livechat-hint livechat-hint rd-notice rd-notice-tooltip single-line hide_hint">
     <div class="popover-content rd-notice-content">嘿！有什么能帮到您的吗？</div>
     </div>
  <div class="animated-circles js-animated-circles animated">
    <div class="circle c-1"></div>
    <div class="circle c-2"></div>
    <div class="circle c-3"></div>
  </div>
</a>
<script type='text/javascript' src='http://cdn.yephy.com/js/jquery-3.2.1.min.js?ver=3.2.1'></script>
<script>
jQuery(function(){
        setInterval(function(){
            jQuery('.js-animated-circles').toggleClass('animated');
        },4000);

        jQuery('#lc-girl-block-en_2').on({'mouseover':function(){
            jQuery(this).find('.js-livechat-hint').removeClass('hide_hint').addClass('show_hint');
        },
            'mouseleave':function(){
                jQuery(this).find('.js-livechat-hint').removeClass('show_hint').addClass('hide_hint');
            }
        })
    });
</script>

上面的代码中，需要留意一些地方：

1、个人QQ号码的替换：

代码第二行中，将 http://wpa.qq.com/msgrd?v=3&uin=252112645&site=qq&menu=yes 这个链接中的 252112645 替换为你的QQ号码，同时你要到 这里 开通“QQ在线”功能；

2、图片和js文件保存及个人路径替换

代码第二行中的图片链接 http://cdn.yephy.com/image/kfh.png 这个是我自己CDN服务器的图片，因为做了防盗链设置，所以如果童鞋们直接复制代码的话，将会无法显示，因此大家可以直接将这个图片保存上传到自己的网站目录或者CDN服务器，然后将链接替换就可以了；

同理，代码第十二行中的JS文件地址，大家也可以用同样的办法将JS文件保存上传到自己的网站目录或者CDN服务器，然后替换对应的链接！

至此，我们的代码添加就完全结束了，将 footer.php 文件保存并上传到网站服务器，清理缓存并刷新页面，怎么样，看到可爱的小企鹅了么？

YephyBlog with QKF

这时候，我们还要解决一个问题，就是想要这个代码，不出现在平版设备或者手机设备的页面上，要解决这个问题，只需要在第一行代码的 <style> 后面加入下面一段代码即可：

@media(max-width:880px){.livechat-girl{display:none}}

将 footer.php 文件重新保存上传后，到移动设备上，刷新一下我们的网页，是不是看不到小企鹅了？再也不用担心它会遮挡屏幕了！^_