Membuat Tombol Whatsapp Melayang

Dalam kesempatan kali ini kami akan berbagi cara membuat tombol Whatsapp melayang/fixed. Di dalam sebuah website ataupun blog biasanya orang akan membuat Whatsapp. Agar memudahkan pengunjung maka tombol Whatsapp dibuat melayang atau fixed di sisi kiri/kanan bawah.

Fungsi dari menuliskan tombol Whatsapp tersebut agar mempermudah pengunjung untuk menghubungi pemilik atau admin web tersebut. Membuat tombol Whatsapp ini akan sangat membantu apabila website tersebut berupa toko online, marketplace ataupun e-commerce lainnya. Sehingga bisa meningkatkan penjualan barang dan jasa yang dipromosikan.

Apalagi sekarang banyak orang yang mengakses internet menggunakan smartphone atau tablet. Dengan adanya tombol Whatsapp tersebut akan mempermudah orang menghubungi pemilik web. Tinggal klik tombol tersebut maka secara otomatis akan menjalankan fungsi Whatsapp tanpa perlu repot menulis nomor Whatsapp.

Untuk membuat tombol melayang itu cukup mudah atau simple dan tanpa menggunakan pluginpun sebenarnya bisa. Hanya memerlukan HTML dan CSS saja tanpa perlu javascript, java, JSON atau bahasa pemograman yang sulit lainnya.

Untuk tombolnya kami menggunakan icon Font Awesome, namun bisa diganti dengan gambar atau icon lainnya.

Membuat Tombol Whatsapp Melayang

Pertama, Buat dulu HTML,nya. Silakan lihat contoh dibawah ini agar lebih jelas.

<a class="wafixed" href="https://wa.me/62823928XXX" target="_blank"><span class="fa-stack fa-lg">
  <i class="fa fa-circle fa-stack-2x text-success"></i>
  <i class="fa fa-whatsapp fa-stack-1x fa-inverse"></i>
</span></a>

*Selanjutnya silakan ganti nomor Whatsapp (gunakan kode negara) tersebut

Kedua, Silakan setting menggunakan CSS, contohnya seperti ini

.wafixed {
    position: fixed;
    right: 30px;
    bottom: 30px;
    z-index: 999;
}

dan hasilnya kurang lebih akan seperti ini, silakan lihat di pojok kanan bawah.

Terima kasih telah mengunjungi website kami.

Share jika bermanfaat, jika ada kritik, tambahan dan saran silakan hubungi kami atau silakan isi di kolom komentar.