Tạo Thanh Menu Support Cực Chất Cho Blogger

Xin chào các bạn đã ghé thăm Blog của mình cũng đã khá lâu rồi mình chưa viết bài cho Blog chủ yếu các bài khác do CTV đăng :)) nên hôm nay rảnh rỗi mình bỏ chút ít thời gian chia sẻ cho các bạn một code cực kì đơn giản nhưng lại có tác dụng lớn đối với Blog.

 Live Demo

Hướng dẫn sử dụng :

- Đầu tiên các bạn đăng nhập vào Blogger - tìm Bố Cục - thêm tiện ích  - HTML/Java Script

- Chèn code này vào nhé :

<!-- Support --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"/> <style> .support-online{position:fixed;z-index:999;left:1%;bottom:27%} .support-online a{position:relative;margin:20px 10px;text-align:left;width:40px;height:40px} .support-online i{width:40px;height:40px;background:#43a1f3;color:#fff;border-radius:100%;font-size:20px;text-align:center;line-height:1.9;position:relative;z-index:999} .support-online a span{border-radius:2px;text-align:center;background:#67b634;padding:9px;display:none;width:180px;margin-left:10px;position:absolute;color:#fff;z-index:999;top:0;left:40px;font-size:14.5px;transition:all .2s ease-in-out 0;-moz-animation:headerAnimation .7s 1;-webkit-animation:headerAnimation .7s 1;-o-animation:headerAnimation .7s 1;animation:headerAnimation .7s 1} .support-online a:hover span{display:block} .support-online a{display:block} .support-online a span:before{content:&quot;&quot;;width:0;height:0;border-style:solid;border-width:10px 10px 10px 0;border-color:transparent #67b634 transparent transparent;position:absolute;left:-10px;top:10px} .kenit-alo-circle-fill{width:60px;height:60px;top:-10px;position:absolute;-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-ms-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out;-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%;border:2px solid transparent;-webkit-transition:all .5s;-moz-transition:all .5s;-o-transition:all .5s;transition:all .5s;background-color:rgba(0,175,242,0.5);opacity:.75;right:-10px} .kenit-alo-circle{width:50px;height:50px;top:-5px;right:-5px;position:absolute;background-color:transparent;-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%;border:2px solid rgba(30,30,30,0.4);opacity:.1;border-color:#0089B9;opacity:.5} .support-online .btn-support{cursor:pointer} </style> <div class='support-online'> <div class='support-content'> <a class='call-now' href='tel:01208.021.643' rel='nofollow'> <i aria-hidden='true' class='fa fa-whatsapp'/> <div class='animated infinite zoomIn kenit-alo-circle'/> <div class='animated infinite pulse kenit-alo-circle-fill'/> <span>Hotline: 01208.021.643</span> </div></div></i></a> <a class='mes' href='https://www.facebook.com/messages/t/QuocRyo.Dz.Vn'> <i aria-hidden='true' class='fa fa-facebook-official'/> <span>Nhắn tin facebook</span> </i></a> <a class='zalo' href='http://zalo.me/0162.527.1155'> <i aria-hidden='true' class='fa fa-comment'/> <span>Zalo: 0162.527.1155</span> </i></a> <a class='sms' href='sms:0982802531'> <i aria-hidden='true' class='fa fa-weixin'/> <span>SMS: 01208.021.643</span> </i></a> </div> <a class='btn-support'> <i aria-hidden='true' class='fa fa-user-circle'/> <div class='animated infinite zoomIn kenit-alo-circle'/> <div class='animated infinite pulse kenit-alo-circle-fill'/> </div></div></i></a> </div> <script type='text/javascript'> //<![CDATA[ $(document).ready(function(){ $('a.btn-support').click(function(e){ e.stopPropagation(); $('.support-content').slideToggle(); }); $('.support-content').click(function(e){ e.stopPropagation(); }); $(document).click(function(){ $('.support-content').slideUp(); }); }); //]]> </script> <!-- End Support -->

- Ấn Lưu và tận hưởng thành quả !

Lời kết :  Chúc các bạn thành công ^^

                                                                                 Bài Viết Bởi : Star Quốc - Nguồn Code : Blog Chia Sẻ Thủ Thuật