NEW

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

32 nhận xét:

  1. Demo ở blog này bên trái đúng k Quý

    Trả lờiXóa
  2. Ngon V: để bên phải đc k bác

    Trả lờiXóa
    Trả lời
    1. bác chỉnh đâu bên css ý cái này tôi lấy trên mấy blog khác không nhớ nguồn nữa

      Xóa
  3. Nguồn: Blog Sẻ Chia Thủ Thuật nhé Quí.
    https://www.blogsechiathuthuat.com/2018/01/tao-box-support-cuc-dep-va-chuyen-nghiep-cho-trang-web.html
    Bữa thấy ảnh để trên blog mà h xóa cmnr.

    Trả lờiXóa
  4. Đây a đây, dạo này a hơi bận quá :)

    Trả lờiXóa
  5. Ok h tui chuẩn bị viết bài nè

    Trả lờiXóa
  6. Liên kết k quý mình là blog mới bắt đầu, sẳn tiện cho xin lìnk fb

    Trả lờiXóa
  7. Tâm sự đêm khuya nào :)

    Trả lờiXóa