Lorem ipsum dolor sit amet, consectetur adipiscing elit. Test link

Widget liên hệ Zalo Messenger cho blogspot

1 min read
Hướng dẫn các bạn tạo Widget liên hệ Zalo Messenger cho blogspot đơn giản đẹp mắt và gọn nhẹ phù hợp với các trang blogspot bán hàng, dịch vụ, tư vấn.

Widget liên hệ Zalo Messenger cho blogspot

Widget liên hệ Zalo Messenger cho blogspot này sẽ nằm cố định bên trái màn hình blogspot của các bạn sau khi thêm.

Các bước cài đặt như sau:

Bước 1: Thêm CSS trước thẻ đóng </b:skin>

.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/AVvXsEgb40JwqtscaNcwdbQfNkEZnWfJvWVzdGHKpQgsbRGZI29cjvzRslnABa31n8d4uBeV9ijHu675l1APjLBtJIrLjWnUrAuncvnxjeDHNdBQSNR4Oac4b2So8H-SzHmeiP60YKV36eRM4PIA/s1600/zalo.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/AVvXsEjZhT0R7ICix9xTyowTrfBj2Y7BOqs8LlEcuDVHivqAhDEQdOZ231qZROSNbzfPGb13zRkXQ0hQzi3MXpQ_KcMbmeuU8Y4AjgaW93F7f5NFbLSnrXFp40NcGT-gbQ8xGeOGjIwm6Be9vWfj/s320/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{background:#1eaf8b}
.the-article-tools li.btnphone .ti-phone{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPqYkH3HOEGbqyCa82r8VS3s8wn6nZLXmI1VeQ70oTDcjjH-5uGg1Rzj91QMgz_NcuzPlDW2OpcHLB1yNUz0YGSsooQ3VOb8QHx1InMxnUEn8_pk021QCwD01kweEygsB06bb8F_wYE1h7/s320/icon-phone.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 span.label{background:#1eaf8b;color:#FFF}
.the-article-tools li.btnphone span.label:before{border-right-color:#1eaf8b}


Bước 2: Thêm HTML trước thẻ đóng </body>

<ul class='the-article-tools'>
  <li class='btnZalo zalo-share-button'>
    <a href='http://zalo.me/xxxxxxx' target='_blank' title='Zalo'>
      <span class='ti-zalo'></span>
    </a>
    <span class='label'>Zalo</span>
  </li>
  <li class='btnFacebook'>
    <a href='https://www.messenger.com/t/xxxxxx' target='_blank' title='Messenger'>
      <span class='ti-facebook'></span>
    </a>
    <span class='label'>Messenger</span>
  </li>
  <li class='btnphone'>
    <a href='tel:11111111111' title='Gọi điện'>
      <span class='ti-phone'></span>
    </a>
    <span class='label'>Hotline</span>
  </li>
</ul>


Sau đó các bạn chỉnh sửa lại thông tin như số điện thoại, facebook, zalo và lưu lại. Khi truy cập trang blogspot tiện ích sẽ hiển thị mặc định bên trái blog của các bạn.

You may like these posts

  • Bài viết này mình hướng dẫn các bạn cách Trì hoãn tải thư viện ADS Google Adsense, để tăng tốc độ load trang, giúp tăng điểm PageSpeed Insights, tăng điểm Lighthouse.Nếu …
  • Sau đây mình hướng dẫn xóa đường viền khung comment blogger, mà nhiều bạn có thể không thích nó, và tìm đủ mọi cách như viết CSS cũng không thể loại bỏ nó.Bài viết này chỉ áp …
  • Bài viết này mình Hướng dẫn Phân trang bài viết blogspot, cách phân trang số thứ tự Blogger, Phân trang trong Blogger Page Navigation.  Cách tạo phân trang cho …
  • Chào tất cả các bạn, một tuần qua mình bận việc trong bệnh viện rất nhiều bạn / khách hàng nhắn tin mua template blogspot, do công việc nên mình không có bán được.Nay mình sẽ khuyế…
  • Bài này mình hướng dẫn các bạn tạo một trang download nhiều get link cho blogspot, bài trước Tạo trang download get link cho blogspot các bạn có thể xem lại.Thời gian chờ…
  • Mẫu Template blogspot được yêu thích nhất đó chính là Ant Green Template, với phiên bản Ajax tính tới hiện tại ngày 8/9/2021 đã bán ra là 17 lần, không tính số lượng bản cũ đã…

Post a Comment

Cookies Consent

This website uses cookies to ensure you get the best experience on our website.

Learn More