Tạo box Support cực đẹp và chuyên nghiệp cho trang web

Duc Tran

tháng 1 07, 2018

Chào các bạn, bài viết này mình sẽ hướng dẫn các bạn tạo box Support cho blog

Hướng dẫn cách làm:

Để thêm box Support các bạn vào trang HTMl, tìm thẻ </body> và nhét toàn bộ đoạn code bên dưới lên trên nó
Demo : Các bạn có thể xem tại trang blog mình 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: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: 0166.41.46.482</span>
    </a>
    <a class='mes' href='https://www.facebook.com/messages/t/100010597577095'>
      <i aria-hidden='true' class='fa fa-facebook-official'/>
      <span>Nhắn tin facebook</span>
    </a>
    <a class='zalo' href='http://zalo.me/0934.90.80.70'>
      <i aria-hidden='true' class='fa fa-comment'/>
      <span>Zalo: XXXX.XX.XX.XX</span>
    </a>
    <a class='sms' href='sms:0982802531'>
      <i aria-hidden='true' class='fa fa-weixin'/>
      <span>SMS: 0166.41.46.482</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 -->

* Đường link trong href='' chắc mình cũng không cần hướng dẫn đâu nhỉ
Chúc bạn thành công!