Widget liên hệ Zalo Messenger cho blogspot

Nếu chưa có kinh nghiệm về Blogspot đừng lo lắng mình có dịch vụ Cầm Tay Chỉ Việc, hãy gọi hoặc Zalo ngay cho mình: 097.1539.681 để được tư vấn và hỗ trợ nhanh nhất nhé!

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 chia sẻ hàng, dịch vụ, tư vấn.

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%;bliên hệ:none;outline:none;box-shadow:none}

.the-article-tools li span.label{display:none;height:30px;line-height:30px;bliên hệ-top-right-radius:15px;bliên hệ-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;bliên hệ-top:15px solid transparent;bliên hệ-right:15px solid #555;bliên hệ-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/AVvXsEja1To39st1a2PyPeQZk0joprxE-8UWlD3xGcWgBijjfcujuzxqNrw3EmDAFSQUcnYya3pmVm02Db82dgBroBdCSfv_8T3twg99oCDv6sEMD4FpH28Sk6PSZvAvbqn-Rlm3fGhfiWiLSLy9/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{bliên hệ-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/AVvXsEg-KzSdG5Cf6svmYRfrCmUpT9Gf6mR9CJ8fHsW-nsXr7cwSKx4jrZ3Cuk3pPuLn0CWx-JWRpsxO7MtqFIeEwD5UfDkCX-IbUYV_CE4ryDaOJourzWOPoQ3NFrF8Tro920W21ttd0QiTcvrs/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{bliên hệ-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/AVvXsEjxnRZa5FoAdxVf5O4mGQqJk_na6ryie8TtUX4rM-FIW-kumB4t37Uf_o05VdhDe9b2_qbXIkqY7JNKHmzbDQ-R-sewopnaIJcd1IlZFIrwPJqzpGcu1L6CXofQ4kjedFAhwRTOA4-ZSVcQ/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{bliên hệ-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.

Bài viết: Widget liên hệ Zalo Messenger cho blogspot được viết bởi admin trang Giaodien.blog

Vui lòng để lại nguồn nếu bạn chia sẻ lại bài viết này.

Để lại nguồn có nghĩa là bạn tôn trọng tác giả.

Động lực để mình chia sẻ nhiều bài viết hay.

Tags: Blog Contact-widget