Bộ ba icon liên hệ cho blogspot

Chia sẻ Bộ ba icon liên hệ cho blogspot phù hợp với các blogger bán hàng, blogspot tư vấn, dịch vụ. Giúp người dùng có thể chủ động liên hệ với chủ shop một cách tiện lợi dễ dàng.


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

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://lh3.googleusercontent.com/-x67QDDO3pgM/YzUbfRbXygI/AAAAAAAAKWo/k50DBQHG8WccYnRyRYklCwpF4iCD6ALYwCNcBGAsYHQ/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://lh3.googleusercontent.com/-1uB9LtaXNig/YzUbfQfy_SI/AAAAAAAAKWk/OAjwCWnTA3g4kYDUVyJ9MP85vBorDRUYQCNcBGAsYHQ/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://lh3.googleusercontent.com/-A0mzQ4aqpi8/YzUbhsycvyI/AAAAAAAAKWs/hmpiP8wSZpAUNHfgy_pkdiRwQ4sHBua-QCNcBGAsYHQ/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>
Mới hơn Cũ hơn
Contact Me on Zalo