Post Detail

CSS Framework

Membuat Button Share WhatApps di Web

by Admin
24 March 2020
866 views

Bila kalian suka melihat tombol share di web yang biasanya berada di paling bawah web. Ini biasanya difungsikan sebagai shortcut share ke social media, untuk share artikel dengan cepat. Cara mebuatnya adalah menurut saya simple, tetapi harus 2 kali pengetesan, kita test lewat Web Desktop dan juga Mobile Web browser responsive nya, karena memang sekarang mengerahnya ke Mobile.

Buat DIV Blank

<div id="helpDesk">
  <a href="" target="_blank" id="whatapps">
    <i class="fa fa-whatsapp" aria-hidden="true"></i>
  </a>
</div>

Dengan style seperti berikut ini.


/* Scroll Top Button */
#helpDesk {
    position: fixed;
    right: 10px;
    bottom: 30px;
    width: 45px;
    height: 45px;
    opacity: 0;
    z-index: 1000;
    font-size: 30px;
    border-radius: 50px;
    background-color: green;
    overflow: hidden;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    text-align: center;
}
  
#helpDesk:hover {
    background-color: red;
}
  
#helpDesk.actived {
    right: 30px;
    opacity: 1;
}

#helpDesk a .fa-whatsapp {
    color: #FFFFFF;
}
  
@media only screen and (min-width: 320px) and (max-width: 575px) {
    #helpDesk {
      bottom: 53px;
      width: 30px;
      height: 43px;
      font-size: 35px;
    }
  
    #helpDesk.actived {
        right: 3px;
        opacity: 1;
    }
}

Kita kasih animasi share buttonnya, supaya pas di scroll dengan height lebih dari 700px maka baru button share akan muncul. Animasih ini dibantu jquery dengan code seperti berikut ini.

$(document).ready(function(){
    // Global variables
    var $win = $(window);
    var $helpDesk = $('#helpDesk');
    // Show Scroll Top Button
    $win.on('scroll', function () {
      if ($(this).scrollTop() > 700) {
          $helpDesk.addClass('actived');
      } else {
          $helpDesk.removeClass('actived');
      }
    });

    // Animate Close
    $helpDesk.on('click', function () {
        $('html, body').animate({
            scrollTop: 0
        }, 500);
    });
});

Outputnya dari codingan kita, saya implementasikan diwebsite asepit juga, berikut hasilnya.