Cara mudah membuat tombol chat whatsapp melayang di blog

Tutorial membuat tombol Whatsapp melayang di blog

Bismillah...
Oke kawan-kawan! Kali ini saya akan sedikit berbagi tips membuat widget tombol whatsapp chat melayang pada blog atau toko online. Menurut saya ini adalah cara yang paling simple untuk membuat tombol whatsapp melayang. Sebelum lanjut membaca tutorial ini, saya harapkan teman-teman sudah paham tentang Cara membuat link whatsapp juga ya.

Pembuatan tombol ini sangat penting karena memudahkan calon pembeli untuk menghubungi anda, baik itu untuk melakukan pendaftaran bisnis, order produk, atau pun hanya sekedar konsultasi.

Teman-teman bisa menerapkan cara ini pada website Toko Online Blogger, WordPress, dan Sejenisnya. Hanya menyesesuaikan saja caranya.

Silakan copy salah satu script widget dibawah ini :
👇👇👇

<style>

.floatwa {

position:fixed;

bottom:0px;

right: 0px;

background-color:#ffffff;

width:100%;

z-index:1000;

padding:2px;

margin:auto;

text-align:center;

float:none;

box-shadow: 0px -2px 10px #c0c0c0;

}

.tombolwa {

border: 1px #56aa71 solid;

background-color:#2f7e49;

width:90%;

padding:4px;

text-align:center;

margin:0;

border-radius: 5px;

margin:auto;

text-align:center;

float:none;

}

.floatwa a{

color:white;

}

</style>

<div class="floatwa">

<a href="https://api.whatsapp.com/send?phone=6281259929797&amp;text=Halo%20gan,%20Saya%20mau%20order" target="_blank"><div class="tombolwa">ORDER VIA WHATSAPP</div></a></div>

👆👆👆
👇👇👇
<style>
.floatwa {
position:fixed;
bottom:0px;
right: 0px;
background-color:#0;
width:30%;
z-index:1000;
padding:2px;
margin:auto;
text-align:right;
float:none;
box-shadow: 0px -2px 0px #c0c0c0;
}
.tombolwa {
border: 0px #56aa71 solid;
background-color:#0;
width:90%;
padding:4px;
text-align:right;
margin:0;
border-radius: 5px;
margin:auto;
text-align:right;
float:none;
}
.floatwa a{
color:white;
}
</style>
<div class="floatwa">
<a href="https://api.whatsapp.com/send?phone=6285332645880&amp;text=*Assalamualaikum*%0AAfwan%20Akhi%20saya%20mau%20tanya%20sesuatu..." target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizucDGLRrNM_XXFlXyEao8q2dcBxHBaa9GswQUxiMnpt9hfBmG22-aZZ9hOkGMxRMRfftmy1XkBJkxAnpgLNlYncxi9yPaj4tUovogVn6CWHxtuNHPNlQIghrfeZVHHYM11af73FYKzYQ/h90/Button+Chat+via+Whatsapp.png" style=" max-width: 100%;" / /></a></div>
👆👆👆

Kemudian pastekan/letakkan script widget diatas pada bagian widget blog milik anda, dan jangan lupa juga untuk mengganti nomor Whatsappnya.

Sekarang perhatikan tahapan ini lalu praktekkan :

1⃣Blogger :

Masuk Dashboard > Tata Letak > Tambahkan  Gadget > HTML/JavaScript, kemudian pastekan/letakkan script pada kolom(judul boleh dikosongkan), ubah nomor wa, lalu simpan.

2⃣WordPress : 

Masuk Dashboard > Tampilan > Widget > Teks, atur posisi widget(bebas), kemudian pastekan/letakkan script pada kolom, ubah no wa, dan simpan.

Jika sudah disimpan, cek halaman website/toko online dan seharusnya widget tombol whatsapp chat sudah muncul dibagian bawah layar, berwarna hijau sesuai seperti yang ada pada blog ini (pada bagian bawah~Lihat Hasilnya di Blog Versi Web~).

Baiklah, itulah tutorial cara membuat widget chat whatsapp melayang atau floating pada website toko online blog, atau sejenisnya.

Semoga teman-teman tidak merasa kesulitan untuk memahaminya, dan berhasil mempraktekannya, serta bisa meningkatkan kualitas bisnis jualannya. Jangan lupa ucapkan bismillah, semoga bermanfaat.

Alhamdulillah