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)

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>

Sao chép code

<!-- 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 !

Bài viết By: Nguyễn Ngọc Quí - Code By: Blog Sẻ Chia Thủ Thuật

Bài đăng Mới hơn Bài đăng Cũ hơn