Cara Membuat Tombol Chat Whatsapp di Blog Melayang

Cara Membuat Tombol Chat Whatsapp di Blog Melayang - Saat ini Whatsapp begitu banyak digemarin oleh para pengguna smartphone di tanah air. Dengan banyaknya pengguna whatsapp, itu berarti akan memudahkan kita dalam bertransaksi.

Saat ini banyak Toko Online atau website jasa online yang membuat widget tombol link chat whatsapp melayang pada website mereka, ini berfungsi untuk memudahkan terjadinya transaksi.

Untuk itu saya ingin berbagi Cara Membuat Tombol Chat Whatsapp di Blog Melayang. Cara ini bisa digunakan pada template AMP dan non-AMP.

Disini saya akan membuatkan caranya dengan 2 versi, yaitu menampilkan ikon dengan CSS dan menampilkan ikon dengan HTML.

1. Ikon dengan CSS

Dengan ini maka kode HTML menjadi lebih simpel karena tidak menggunakan kode HTML ikon SVG.

Simpan kode HTML berikut di atas kode </body>

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

Ganti kode 628********** dengan nomor WA Anda.

Tambahkan CSS berikut di style blog Anda.

.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);
}

Preview

2. Ikon dengan HTML

Dengan ini maka CSS nya lebih kecil.

Simpan kode HTML berikut di atas kode </body>

<a class='fixed-whatsapp' href='https://api.whatsapp.com/send?phone=628**********' rel='nofollow noopener' target='_blank' title='Whatsapp'>
<svg viewBox='0 0 24 24' width='34' height='34'>
<path fill='#ffffff' 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'/>
</svg>
</a>

Ganti kode 628********** dengan nomor WA Anda.

Tambahkan CSS berikut di style blog Anda.

.fixed-whatsapp {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  line-height: 50px;
  z-index: 9999;
  text-align: center;
}

.fixed-whatsapp:before {
  content: "";
  width: 50px;
  height: 50px;
  background-color: #00C853;
  position: absolute;
  border-radius: 100%;
  box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, .12), 0 1px 1px 0 rgba(0, 0, 0, .24);
  z-index: 1;
  top: 0;
  left: 0;
}

.fixed-whatsapp svg {
  vertical-align: middle;
  z-index: 2;
  position: relative;
}

Jika ingin menambahkan kata-kata di atasnya, silahkan tambahkan CSS berikut:

.fixed-whatsapp:after {
  content: "Hai...kakak, chat mimin di sini yah!";
  width: 100px;
  padding: 5px 10px;
  position: absolute;
  bottom: 100%;
  margin-bottom: 10px;
  right: -150px;
  text-align: right;
  color: #555;
  border: 1px solid #dedede;
  background: rgba(255,255,255,.5);
  border-radius: 4px;
  opacity: 0;
  transition:all .4s ease-in-out;
  font-size: 90%;
  line-height: 1.1;
}

.fixed-whatsapp:hover:after {
  opacity: 1;
  right: 0;
}

Preview

Yang ditandai silahkan sesuaikan dengan kata-kata Anda. Silahkan coba demonya dan hover ikonnya.

Sekian dulu pembahasan kita kali ini tentang Cara Membuat Tombol Chat Whatsapp di Blog Melayang. Mudah-mudahan dapat bermanfaat dan berguna untuk Anda, jika ada pertanyaan silahkan tanyakan pada kolom komentar. Happy Blogging!