YephyBlog
customer-service-code

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

话不多说,想必大家已经看到我的网站右下方出现的浮动的企鹅头像了,点击它就可以直接跳出弹窗提示你可以与我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&amp;uin=252112645&amp;site=qq&amp;menu=yes" target="_blank"><img class="girl" border="0" src="http://cdn.yephy.com/image/kfh.png" alt="点击这里给我发消息" title="点击这里给我发消息">
  <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&amp;uin=252112645&amp;site=qq&amp;menu=yes 这个链接中的 252112645 替换为你的QQ号码,同时你要到 这里 开通“QQ在线”功能;

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

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

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

 

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

YephyBlog-with-QKF

这时候,我们还要解决一个问题,就是想要这个代码,不出现在平版设备或者手机设备的页面上,要解决这个问题,只需要在代码中第一行CSS代码的部分,首尾分别加入 @media(min-width:880px) { 和 } 就可以了,加过之后的代码如下(这里只显示第一行代码):(之前代码错误,导致在手机和平板上还会显示,只是样式发生了改变,并且出现在页面的底部,这里改正下)只需要在第一行代码的 <style> 后面加入下面一段代码即可:

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

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

去打赏

您的支持将鼓励我们继续创作!

[微信] 扫描二维码打赏

[支付宝] 扫描二维码打赏

正在跳转到PayPal...

Yephy

Do the right thing at the right time !

发表评论

Yephy

Do the right thing at the right...