Cách Tạo Thanh Menu Support Cho Blogspot

Xin chào các bạn, đã đến với blog của mình hôm nay ở bài viết này mình xin chia sẻ cách tạo thanh menu support cho blog code này mình lấy 2 ngày rồi nên cũng không nhớ nguồn ai biết nguồn code thì (bình luận bên dưới mình sẽ ghi nguồn trong bài viết này)

Cách Tạo Thanh Menu Support Cho Blogspot

Live Demo

Cách Thực Hành

Bước 1: Đăng nhập blogger - Chủ Đề - Chỉnh sửa HTML
Chèn đoạn code sau trước thẻ </head>
1<!-- Support --> <link href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css' rel='stylesheet'/> <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:0934.90.80.70' 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: 0909.256.402</span> </a> <a class='mes' href='https://www.facebook.com/messages/t/nguyenngocquidz.tk'> <i aria-hidden='true' class='fa fa-facebook-official'/> <span>Nhắn tin facebook</span> </a> <a class='zalo' href='/'> <i aria-hidden='true' class='fa fa-comment'/> <span>Zalo: 0909.256.402</span> </a> <a class='sms' href='sms:0982802531'> <i aria-hidden='true' class='fa fa-weixin'/> <span>SMS: 0909.256.402</span> </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'/> </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 -->
Lưu chủ để và xem thành quả

Tổng Kết

Chỉ thao tác vài bước bạn đã có ngay một thanh menu support tuyệt đẹp cho blog của mình rồi.
Chúc các bạn thành công !
Cách Tạo Thanh Menu Support Cho Blogspot Reviewed by Lê Anh Đức on tháng 1 09, 2018 Rating: 5

Không có nhận xét nào :

Một số lưu ý khi bình luận

Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước (xem nội quy)

Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi admin trả lời

Để bình luận một đoạn code, hãy mã hóa code trước nhé

BIỂU MẪU LIÊN HỆ

Tên

Email *

Thông báo *

Được tạo bởi Blogger.

Tạo Ảnh Đẹp | Cách tạo ảnh và chia sẻ tài nguyên