Cara Membuat Tombol Whatapp Melayang Menggunakan Whatsapp Floating Button

Memiliki blog atau sistem informasi dengan fitur khusus memang sangat memberikan kelebihan khusus dari suatu blog atau sistem.

Whatsapp floating button merupakan tombol chat langsung yang biasanya terdapat pada suatu sistem atau blog. tombol ini berguna ketika pengunjung sistem atau blog kita ingin menghubungi admin atau pemilik blog secara langsung.

Posisi dari whatsapp floating button ini biasanya berada pada bagian bawah sebalah kanan atau bisa di manapun tergantung si pemilik sistem atau pemilik blog meletakanya.

Pada artikel kali ini kita akan membahas bagaimana cara membuat atau memasang "Whatsapp floating button pada blog saja" karena untuk sistem kurang lebih penggunaanya sama. yaitu dengan memasukan file CSS dan HTML pada codingan kita.

Langsung saja kita mengikuti langkah - langkah dibawah untuk memasang whatsapp floating button pada blog kita.

Tutorial Blogging cara membuat chat langsung pada blog

Pertama

Kita kunjungi situs Whatsapp Floating Button:

https://codepen.io/demoonkevin/pen/MvPEpV. 

Kita akan melihat Codingan berupa Codingan HTML - CSS dan Demo dari Whatsapp Floating Button Tersebut.

Kedua

Simpan dulu tab tersebut kita buka tab baru dan login ke blog kita.

Ketiga

Setelah berhasil login ke blog, kita langsung ke menu pengaturan tema dan pilih Sesuaikan.

Keempat

Kita bisa langsung memilih Lanjutan - Tambahkan File CSS. untuk lebih jelasnya kita bisa lihat pada gambar dibawah.

Kelima

Kita kembali ke tab Whatsapp Floating Button Untuk Mengambil Coding CSS yang akan kita letakan di Tambahkan CSS. Caranya cukup mudah tinggal kita Copy Paste saja kodingan dari WFB tersebut dan letakan pada Tambahkan CSS.

Keenam

Setelah kita letakan langsung saja kita simpan dengan cara klik Terapkan ke Tema Blog.

Ketujuh

Setelah berhasil menambahkan file CSS pada tema blog kita langsung saja kita masuk ke menu Tata Letak pada blog kita.

Kedelapan

Lakukan pilihan tambah HTML Java Script pada bagian Sidebar Kanan tampilan Tata letak blog kita kemudian kita masukan file HTML dari web whatsapp floating button tadi kemudian langsung saja kita Copy Paste seperti langkah Kelima tadi. 

Kesembilan

Simpan Tampilan Tata Letak maka blog kita sudah memiliki whatapp floating button pada blog kita. Selamat mencoba teman - teman.

Note:

Untuk mengarahkan chat langsung ke Whatsapp milik kita, teman teman bisa mengubah HTML-JavaScript pada Gadget HTML-JavaScript dan mengganti nomor HP teman - teman seperti contoh dibawah (Yang bercetak miring adalah nomor Whatsapp dan Isi Pesan langsung):

<ahref="https://api.whatsapp.com/send?phone=6282284394548&text=Hallo%21%20Saya%20salah%20satu%20pengunjung%20situs%20web%20zonamatika...."

Dan untuk isi pesan bisa kita lihat ada simbol %20 dalam Coding HTML dijadikan sebagai pengguna spasi.

Sebagai contoh jika kita ingin menuliskan isi dari pesan teks Selamat Malam maka teman - teman bisa menulisnya dengan Selamat%20Malam.

Semoga artikel kali ini bermanfaat. jangan lupa belajar dan membaca hari ini....

Bagikan Postingan