Skip to main content

Cara Buat Tombol Whatsapp Melayang Di Blog Dengan Bouncing Effect


Apakah anda pernah melihat tombol whatsapp melayang di sebuah blog atau website ?
Mungkin sudah tidak asing lagi yah , tombol whatsapp melayang ini biasanya ada di sebuah blog jualan atau website toko online yang bertujuan mempermudah konsumen menghubunginya via whatsapp.
Tombol whatsapp melayang ini juga lebih efektif di bandingkan dengan memasang link wa biasa karana dengan Tombol whatsapp melayang ketika blog di scroll akan tetap keliatan, lebih menarik lagi kalo di buat dengan effect bounce karana kemungkinan banyak orang yang mengklik nya di karana kan lebih akan lebih menarik para pengunjung blog tersebut.
Tombol whatsapp ini juga bisa di terapkan di Blog AMP juga.

Berikut Ini Demonya


Cara Membuat Tombol Whatsapp Melayang



Tombol ini juga menggunakan icon SVG jadi lebih ringan buat blog

1.

Tambahkan HTMl di bawah ini tepat di atas </body>

<a class='fixed-whatsapp encepnurdin'
href='https://api.whatsapp.com/send?phone=628xxxxxxxxxx' rel='nofollow noopener' target='_blank' title='Whatsapp' />

Keterangan :
Silahkan ganti 628xxxxxxxxxx dengan no whatsapp anda

2.

Kemudian tambahkan Css berikut ini


.fixed-whatsapp {
  position: fixed;
  bottom: 20px;
  Right: 20px;
  width: 50px;
  height: 50px;
  z-index: 9999;
}

.fixed-whatsapp:before {
  content: "";
  background-repeat: no-repeat;
  background-size: 34px 34px;
  background-position: center center;
  width: 50px;
  height: 50px;
  background-image: url("data:image/svg+xml;charset=utf8,%3csvg viewBox='0 0 24 24' width='32' height='32' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg%3e%3cpath style='fill:%23ffffff' d='M16.75,13.96C17,14.09 17.16,14.16 17.21,14.26C17.27,14.37 17.25,14.87 17,15.44C16.8,16 15.76,16.54 15.3,16.56C14.84,16.58 14.83,16.92 12.34,15.83C9.85,14.74 8.35,12.08 8.23,11.91C8.11,11.74 7.27,10.53 7.31,9.3C7.36,8.08 8,7.5 8.26,7.26C8.5,7 8.77,6.97 8.94,7H9.41C9.56,7 9.77,6.94 9.96,7.45L10.65,9.32C10.71,9.45 10.75,9.6 10.66,9.76L10.39,10.17L10,10.59C9.88,10.71 9.74,10.84 9.88,11.09C10,11.35 10.5,12.18 11.2,12.87C12.11,13.75 12.91,14.04 13.15,14.17C13.39,14.31 13.54,14.29 13.69,14.13L14.5,13.19C14.69,12.94 14.85,13 15.08,13.08L16.75,13.96M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C10.03,22 8.2,21.43 6.65,20.45L2,22L3.55,17.35C2.57,15.8 2,13.97 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12C4,13.72 4.54,15.31 5.46,16.61L4.5,19.5L7.39,18.54C8.69,19.46 10.28,20 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4Z'%3e%3c/path%3e%3c/g%3e%3c/svg%3e");
  background-color: #00C853;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 100%;
  box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, .12), 0 1px 1px 0 rgba(0, 0, 0, .24);
}
 
.encepnurdin {
      
-webkit-animation:rubberBand 1s linear 1s infinite normal;animation:rubberBand 1s linear 1s infinite normal}
@media screen and (max-width:320px)
@keyframes rubberBand{,10%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}
40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}
50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}
65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}
75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}
}
@-webkit-keyframes rubberBand{0%,100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}
40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}
50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}
65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}
75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}
}

Keterangan :
Right untuk posisi kanan whatsapp, jika ingin di terapkan di kiri ganti dengan Left
Button: 20px untuk mengatur tinggi tombol whatsapp semakin tinggi px nya semakin tinggi juga tombol whatsapp nya
selebihnya silahkan atur sendiri Css nya


Semoga bermanfaat
Reaksi:

Berbagi Itu Peduli :

  • Sri Nanang Heru Setiyono - Reader 7/13/2020 5:26 PM

    terima kasih sudah berbagi. Sangat berguna caranya. Salam

  • Encep Nurdin ID - Reader 7/13/2020 9:02 PM

    Salam kembali gan , semoga bermanfaat yah 😀

  • Sri Nanang Heru Setiyono - Reader 7/14/2020 10:24 AM

    Kang kalau mau nambahin salam pembuka yang langsung bisa muncul gimana?

  • Encep Nurdin ID - Reader 7/15/2020 3:01 AM

    Kalu untuk non amp saya belum bikin tutorialnya mas tapi kalu untuk amp bisa pakai amp popup notifcation

Comment Policy: Gunakanlah kontak komentar ini dengan bijak jangan buat link atau spam, Jika berkenan silahkan terlebih dahulu, Follow this blog

Selanjutnya tuliskan komentar anda sesuai dengan topik postingan ini.

Centang kotak Beritahu saya untuk mendapatkan notifikasi balasan via email.

Untuk komentar secara Private silahkan masuk ke Messaging Google