Bộ ba icon liên hệ cho blogspot

Bộ ba icon liên hệ cho blogspot liên hệ gồm: Zalo, Messenger Facebook, Gọi điện thoại.

Cách cài đặt đơn giản là bạn copy toàn bộ code bên dưới dán trước thẻ đóng </body> và lưu lại là xong.

<style>
  /*<![CDATA[*/
.the-article-tools{top:200px;z-index:1000;position:fixed;margin-left:0;width:43px;left:0}.the-article-tools li{width:43px;height:43px;display:block;cursor:pointer;font-size:16px;line-height:46px;text-align:center;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;position:relative}.the-article-tools li a,.the-article-tools li button{color:#FFF;display:block;width:100%;height:100%;border:none;outline:none;box-shadow:none}.the-article-tools li span.label{display:none;height:30px;line-height:30px;border-top-right-radius:15px;border-bottom-right-radius:15px;position:absolute;left:60px;top:7px;white-space:nowrap;padding:0 15px 0 6px;background:#555;color:#FFF}.the-article-tools li span.label:before{content:"";top:0;left:-14px;position:absolute;display:block;width:0;height:0;border-top:15px solid transparent;border-right:15px solid #555;border-bottom:15px solid transparent}.the-article-tools li:hover span.label{display:block}.the-article-tools li.btnZalo{background:#018fe5}.the-article-tools li.btnZalo .ti-zalo{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgO-LWtYLKbcVykgSo0sImngiaWymINTgkHPBHCLV9pKeVITlI6qQ9kXErGjaegQPh-jsNdoRGrTNO5ypeQEoHG_0gIW_INx5esio97npo3rokdIyU0ja_ih-guS8qaPJiTUMs6a4a9Uzdt/h120/icon_zalomessage.png) no-repeat 50% 50%;width:20px;height:20px;display:inline-block;background-size:20px;vertical-align:middle;margin-right:2px;position:relative;top:-2px}.the-article-tools li.btnZalo span.label{background:#018fe5;color:#FFF}.the-article-tools li.btnZalo span.label:before{border-right-color:#018fe5}.the-article-tools li.btnFacebook{background:#306199}.the-article-tools li.btnFacebook .ti-facebook{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAvzI7r8Kq9kGGVBlGAJ3cJYofdXsBKMyLfOXCzEw3bInP03kR7hfBpOYnzQWxegBsBXASEyuKuvsFZ8LwHVvNtrnmIoaoYNZacrLrsL63nCrJ3xNnOrywMjYkIMLn9Udwwiosb_5gti5l/h120/messenger.png) no-repeat 50% 50%;width:20px;height:20px;display:inline-block;background-size:20px;vertical-align:middle;margin-right:2px;position:relative;top:-2px}.the-article-tools li.btnFacebook span.label{background:#306199;color:#FFF}.the-article-tools li.btnFacebook span.label:before{border-right-color:#306199}.the-article-tools li.btnphone .ti-phone{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJT1hw-YvpoUcryAJEEGL9mAoVgXZAUcXgPrpYqNwM3FUmYyJajPgn3tVdpn0P4PtBMldWHJvoMOsCqjqo-v_6pYl3sGuvibJa_xl6cOnpdriPwLfY8G7I4OKQfzZ8T8d43TB6VqYNkp4L/h120/telephone.png) no-repeat 50% 50%;width:20px;height:20px;display:inline-block;background-size:20px;vertical-align:middle;margin-right:2px;position:relative;top:-2px}.the-article-tools li.btnphone{background:#1eaf8b}.the-article-tools li.btnphone button{background:#1eaf8b}.the-article-tools li.btnphone span.label{background:#1eaf8b;color:#FFF}.the-article-tools li.btnphone span.label:before{border-right-color:#1eaf8b}
  /*]]>*/
</style>
<ul class='the-article-tools'>
  <li class='btnZalo zalo-share-button'>
    <a href='http://zalo.me/0982 362 509' target='_blank' title='Chat qua Zalo'>
      <span class='ti-zalo' />
    </a>
    <span class='label'>Chat qua Zalo</span>
  </li>
  <li class='btnFacebook'>
    <a href='https://www.messenger.com/t/vemiendisan' target='_blank' title='Chat qua Messenger'>
      <span class='ti-facebook' />
    </a>
    <span class='label'>Chat qua Messenger</span>
  </li>
  <li class='btnphone'>
    <button data-target='#hotlineModal' data-toggle='modal' type='button'>
      <span class='ti-phone' />
    </button>
    <span class='label'>Hotline đặt Tour</span>
  </li>
</ul>