話不多說，我的網站（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" target="_blank">
<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 文件重新保存上傳后，到移動設備上，刷新一下我們的網頁，是不是看不到小企鵝了？再也不用擔心它會遮擋屏幕了！_
