Hỗ trợ trực tuyến

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



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!

Trần Thanh Bình

Muốn giỏi phải học, muốn học thì phải hỏi. Chính vì thế, hãy cùng tham gia thảo luận với nhau để tìm ra câu trả lời nếu có thắc mắc nhé!. Xem thêm về tôi


Cùng tham gia bình luận bài viết này nhé!

» Hãy là con người văn minh từ những câu nói

Loading...