SORACC: Website

Chủ Nhật, 7 tháng 1, 2018

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

Nguyễn Đình Diện Comment

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!

Thêm quote Chia sẻ báo giá cho trang web của bạn

Nhìn tiêu đề thì bạn cũng đã biết mình hướng dẫn gì nên mình cũng không phải nói lại nữa

Bắt đầu nhé.

HƯỚNG DẪN CÁCH LÀM:

Bước 1: Tìm thẻ đóng </body> và nhập đoạn code bên dưới lên trên nó (bước này dành cho ai chưa thêm API fb, còn thêm rồi thì khỏi thêm nhé)

<div id='fb-root'/>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = &#39;https://connect.facebook.net/vi_VN/sdk.js#xfbml=1&amp;version=v2.11&amp;appId=375544679461395&#39;;
  fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>

Bước 2: Nhập đoạn code phía dưới lên trên <div id='fb-root'/> hoặc <div id='fb-root'></div>