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

Thêm tiện ích liên hệ Zalo, Facebook cho blogspot

2 min read
Sau đây mình hướng dẫn các bạn cách thêm tiện ích liên hệ cho blogspot bao gồm nút gọi điện, liên hệ, zalo, facebook.

Thêm tiện ích liên hệ Zalo, Facebook cho blogspot

Khi cuộn trang thì tiện ích liên hệ sẽ hiển thị, rất tiện cho các trang blogspot bán hàng, dịch vụ, liên hệ.

Code được chia sẻ bởi thietkeblogspot

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


.echbay-sms-messenger{position:fixed;top:50%;right:0;transform:translate(-0,-50%);z-index:999!important;display:none}
.echbay-sms-messenger div{width:45px;margin:7px 0;background:#0084FF center no-repeat;background-size:70%;border-radius:50%}
.echbay-sms-messenger div:first-child{margin-top:0}
.echbay-sms-messenger div:last-child{margin-bottom:0}
.echbay-sms-messenger a{display:block;line-height:45px}
.echbay-sms-messenger div.phonering-alo-alo{background-color:#0080c0}
.echbay-sms-messenger div.phonering-alo-zalo{background-color:#008df2}
.echbay-sms-messenger div.phonering-alo-alo{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl_8do1KvDgH2gWbxc-dkDuUjoE1RFABRmnVXxDK_Ct43ekZ5XpAbxKlJpfsmH9eCQOfhYMPmzqMJ0I0BWtpduP5dtcaKd4i-A_L41ZwHfV-eHnPenkPvMCLBcz2EkkyLReL1ykbYKkMY/s1600/call.png)}
.echbay-sms-messenger div.phonering-alo-sms{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkLUAzhH1jL9GaUp7LN4zDk6nT2iCAJFxXHUrMglHm_1ru1XgMCMxxqNeCq23XnaeUodOqPitfdfASH0WlyAOY587DEKBmv95XMEpEyfxx_X1EgD1EHoqgYNxBaChSMueN-WZ4gDl9upI/s1600/mail.png);background-color:#00a651;background-size:60%}
.echbay-sms-messenger div.phonering-alo-messenger{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjljKX9n5ooJKEfsRsfowl5ABqhQDIOXUQQn3PWRgoNh2M1roZksqvBql_uegjNmJuXJ9dshiAYXMe-uX4pc1XqOx6OWeTTC6-VFzAeZNJD0Q3b38AerqLzIAgDHPPBtokMpHJCIyX8lno/s1600/messenger.png);background-color:#0084FF}
.echbay-sms-messenger div.phonering-alo-zalo{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeon2m8skq5Xo5aW44JxxgMYjhUBPBMYmxpNvCM2Rmmx8t5vLwZuxXvIQZJDQuDg9-HS96XipY7FQgsfCjxIfFIqTEk5ISrpC-gtCzot3qV4temDR4HEJsirS5XEqH6G9O0UmzLQlIPTs/s1600/zalo.png)}

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

<div class='echbay-sms-messenger'>
  <div class='phonering-alo-alo'>
    <a href='tel:+84123456789' rel='nofollow' title='Yêu cầu gọi lại'>.</a>
  </div>
  <div class='phonering-alo-sms'>
    <a href='sms:+84123456789' rel='nofollow' title='Gửi tin nhắn'>.</a>
  </div>
  <div class='phonering-alo-zalo'>
    <a href='https://zalo.me/+84123456789' rel='noppener nofollow' target='_blank' title='Zalo Chat'>.</a>
  </div>
  <div class='phonering-alo-messenger'>
    <a href='https://www.messenger.com/t/kequaduongvodanh' rel='noppener nofollow' target='_blank' title='Messenger Chat'>.</a>
  </div>
</div>

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

Bước này có hai sự lựa chọn

1. Theo bản gốc của thietkeblogspot viết


<script>//<![CDATA[
$(document).on('scroll', function() {
  var x = $(this).scrollTop(),
    y = $('#template').offset().top
  if (x > y) {
    $('.echbay-sms-messenger').fadeIn()
  } else {
    $('.echbay-sms-messenger').fadeOut()
  }
})
//]]></script>
Như vậy trên template của các bạn cần phải gắn 1 id có tên là template để khi các bạn cuộn trang tới vị trí id là template thì tiện ích sẽ hiện thị

Cái bất tiện ở đây là trang nào (trang chủ, bài viết, page...) bạn cũng cần phải gắn id cho nó thì nó mới hoạt động.

2. Mình tối ưu lại đoạn code trên như sau:


<script>
  //<![CDATA[
  $(window).scroll(function() {
    $(this).scrollTop() > 200 ? $('.echbay-sms-messenger').fadeIn() : $('.echbay-sms-messenger').fadeOut()
  })
  //]]>
</script>


Với cách này của mình bạn không cần phải thêm bất cứ id nào cả, chỉ cần chỉnh sửa con số 200 theo ý muốn, con số 200 tứ là vị trí 200px khi bạn cuộn trang tính từ TOP.

You may like these posts

  • Thêm một Tiện ích liên hệ zalo gọi điện cho trang web hoặc blogspot, tiện ích hiển thị đẹp bao gồm zalo, messenger, gọi điện và maps.Blogspot của bạn đang bán hàng hoặc làm dị…
  • Hướng dẫn tạo Tiện ích liên hệ cho blogspot gồm Gọi điện, Email, Zalo, Facebook, Maps phù hợp cho trang blogspot bán hàng.Hướng dẫn cài đặt: Các bạn copy toàn bộ nội dung…
  • Chia sẻ tiện ích Nút gọi điện rung lắc cho blogger blogspot đẹp, phù hợp với blogspot bán hàng, bất động sản, dịch vụ chăm sóc khách hàng.Nút gọi điện rung lắc cho blogger cài…
  • Chia sẻ tới các bạn đang dùng mẫu template blogspot một Tiện ích Contact cho blogspot đẹp hiện đại, phù hợp cho blgospot bán hàng, tư vấn dịch vụ.Tiện ích Contact cho blogspot…
  • Hướng dẫn các bạn cài đặt Tiện ích liên hệ Facebook Zalo Gọi điện rung lắc nằm cố định bên phải trang web hoặc blogspot, phù hợp cho các template blogspot bán hàng.Cách cài đặ…
  • Chia sẻ mẫu Tiện ích liên hệ Zalo Messenger Gọi điện đẹp, nút Zalo rung lắc phù hợp với nhiều blogspot bán hàng, tư vấn dịch vụ.Tiện ích liên hệ Zalo Messenger hiện thị cố địn…

Post a Comment

Cookies Consent

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

Learn More