Bộ tiện ích liên hệ cho blogspot

Bộ tiện ích liên hệ cho blogspot đẹp chuyên nghiệp, phù hợp với các blog bán hàng như mỹ phẩm, thời trang, công nghệ, giày dép.


Bộ tiện ích liên hệ cho blogspot
Hướng dẫn tạo tiện ích liên hệ như Zalo, Messenger, Gọi điện, Facebook, các bước thực hiện đơn giản là chỉ cần copy toàn bộ code sau dán trước thẻ đóng </body> một số template là &lt;!--</body>--&gt;&lt;/body&gt; và lưu lại là xong.


  
<link crossorigin='anonymous' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css' integrity='sha512-5A8nwdMOWrSz20fDsjczgUidUBR8liPYU+WymTZP1lmY9G6Oc7HlZv156XqnsgNUzTyMefFTcsFH/tnJE/+xBg==' referrerpolicy='no-referrer' rel='stylesheet'/>    
<style>
  /*<![CDATA[*/
.support-online{position:fixed;z-index:999;left:15px;bottom:30px;top:auto !important}.support-cart{position:fixed;z-index:999;right:15px;bottom:30px;top:auto !important}.support-cart a{position:relative;margin:20px 10px;text-align:left;width:40px;height:40px;cursor:pointer;display:block}.support-cart a i{width:40px;height:40px;background:#4f240a;color:#fff;border-radius:100%;font-size:20px;text-align:center;line-height:1.9;position:relative;z-index:999}.support-cart a .kenit-alo-circle{border-color:#ffc11a}.support-cart a .kenit-alo-circle-fill{background-color:#4f240a;background-color:rgba(79,36,10,0.5)}.support-cart .count_item_pr{position:absolute;top:-5px;right:-5px;height:20px;min-width:20px;border-radius:50%;color:#fff;background-color:#ffba00;text-align:center;line-height:20px;z-index:9999}.support-online a{position:relative;margin:20px 10px;text-align:left;width:40px;height:40px}.support-online i{width:40px;height:40px;background:#ffba00;color:#fff;border-radius:100%;font-size:20px;text-align:center;line-height:1.9;position:relative;z-index:999}.support-online a{display:block}.support-online a span{border-radius:2px;text-align:center;background:#ffba00;padding:9px;display:none;width:210px;margin-left:10px;position:absolute;color:#ffffff;z-index:999;top:0px;left:40px;transition:all 0.2s ease-in-out 0s;-moz-animation:headerAnimation 0.7s 1;-webkit-animation:headerAnimation 0.7s 1;-o-animation:headerAnimation 0.7s 1;animation:headerAnimation 0.7s 1}.support-online a:hover span{display:block}.support-online a span::before{content:"";width:0;height:0;border-style:solid;border-width:10px 10px 10px 0;border-color:transparent #ffba00 transparent transparent;position:absolute;left:-10px;top:10px}.kenit-alo-circle-fill{width:60px;height:60px;top:-10px;position:absolute;-webkit-transition:all 0.1s ease-in-out;-moz-transition:all 0.1s ease-in-out;-ms-transition:all 0.1s ease-in-out;-o-transition:all 0.1s ease-in-out;transition:all 0.1s ease-in-out;-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%;border:2px solid transparent;-webkit-transition:all .1s;-moz-transition:all .1s;-o-transition:all .1s;transition:all .1s;background-color:rgba(255,186,0,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:#ffc11a;opacity:.5}.support-online .btn-support{cursor:pointer}@-webkit-keyframes pulse{0%{-webkit-transform:scale(1.1);transform:scale(1.1)}50%{-webkit-transform:scale(0.8);transform:scale(0.8)}100%{-webkit-transform:scale(1.1);transform:scale(1.1)}}@keyframes pulse{0%{-webkit-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1)}50%{-webkit-transform:scale(0.8);-ms-transform:scale(0.8);transform:scale(0.8)}100%{-webkit-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1)}}.animated{animation-duration:1s;animation-fill-mode:both}.animated.infinite{animation-iteration-count:infinite}.animated.hinge{animation-duration:2s}.animated.flipOutX,.animated.flipOutY,.animated.bounceIn,.animated.bounceOut{animation-duration:.75s}@keyframes zoomIn{from{opacity:0;transform:scale3d(0.3, 0.3, 0.3)}50%{opacity:1}}.zoomIn{animation-name:zoomIn}@keyframes pulse{from{transform:scale3d(1, 1, 1)}50%{transform:scale3d(1.05, 1.05, 1.05)}to{transform:scale3d(1, 1, 1)}}.pulse{animation-name:pulse}@keyframes rubberBand{from{transform:scale3d(1, 1, 1)}30%{transform:scale3d(1.25, 0.75, 1)}40%{transform:scale3d(0.75, 1.25, 1)}50%{transform:scale3d(1.15, 0.85, 1)}65%{transform:scale3d(0.95, 1.05, 1)}75%{transform:scale3d(1.05, 0.95, 1)}to{transform:scale3d(1, 1, 1)}}
  /*]]>*/
</style>    
<div class='support-online'>
  <div class='support-content' style='display: none;'>
    <a class='call-now' href='tel:19006750' rel='nofollow'>
      <i aria-hidden='true' class='fa fa-phone' />
      <div class='animated infinite zoomIn kenit-alo-circle' />
      <div class='animated infinite pulse kenit-alo-circle-fill' />
      <span>Gọi ngay: 1900 6750</span>
    </a>
    <a class='mes' href='https://www.messenger.com/t/561797710650232' target='_blank'>
      <i aria-hidden='true' class='fa fa-facebook-official' />
      <span>Chat qua Messenger</span>
    </a>
    <a class='zalo' href='mailto:support@sapo.vn' target='_blank'>
      <i class='fa fa-envelope' />
      <span>support@sapo.vn</span>
    </a>
    <a class='sms' href='sms:19006750'>
      <i aria-hidden='true' class='fa fa-comments' />
      <span>SMS: 1900 6750</span>
    </a>
  </div>
  <a class='btn-support'>
    <i aria-hidden='true' class='fa fa-phone' />
    <div class='animated infinite zoomIn kenit-alo-circle' />
    <div class='animated infinite pulse kenit-alo-circle-fill' />
  </a>
</div>
<script>
  //<![CDATA[
  $('a.btn-support').click(function(e) {
    e.stopPropagation();
    $('.support-content').slideToggle();
  });
  //]]>
</script>


Mới hơn Cũ hơn
Contact Me on Zalo