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

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.

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.