Cara Membuat Tombol Widget WhatsApp Melayang

Cara Membuat Widget Tombol Link Chat Whatsapp Melayang - Jika dulu WhatsApp digunakan hanya untuk sekedar Chatting antar teman, kini aplikasi Tersebut banyak digunakan oleh para
pembisnis toko online sebagai fitur pemesanan utama. Hal tersebut diterapkan guna untuk memberi kesempatan para konsumen untuk berinteraksi langsung dengan penjual dengan berbagai macam alasan.

Salah satu alasan untama yang membuat para Owner menyediakan sistem pemesanan melalui tombol Chatting Wa yaitu tidak memerlukan sistem khusus dan memudahkan kedua belah pihak baik konsumen maupun penjual itu sendiri.

Memang Tombol chat WhatsApp ini sering banyak digunakan oleh para blogger yang menekuni bisnis Marketing mereka. Namun itu dulu dan sekarang sudah jarang yang menggunakan dan justru pengguna olshop lah yang memasang-nya.

Sebenarnya anda bisa menggunakan tombol Chat of namun memiliki tingkat visibilitas yang rendah sehingga dapat merugikan pemilik blog maupun pengguna. Jadi khusu pembahasan kali ini saya akan sajikan tutorial cara membuat Tombol chat WhatsApp melayang ketika di srooll untuk memperoleh tinggal visibilitas yang tinggi sehingga banyak memperoleh Klik dari sebelumnya.

Bagi anda yang masih memakai witget WhatsApp biasa bisa langsung menggantinya dengan tombol WhatsApp melayang dengan cara Copas Css serta HTML berikut 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>

Cara pasang Tombol di WhatsApp melayang pada blogger.

Setelah Anda Copy Code diatas, Silahkan Anda pasang pada blogger dengan cara

1. Buka Blogger.com
2. Masuk ke Tata letak
3. Silahkan tambahkan Box HTML/JavaScript
4. Pastikan Kode yang sudah Anda Copy tadi pada box tersebut dan jangan lupa Ganti No Hp dengan No telepon Anda.
5. Klik Simpan

Penjelasan Kode:

• %20 - Untuk memberi spasi pada Chat yang akan masuk
• 6281259929797 merupakan No Hp, Silahkan Anda ganti sesuai no Hp milik Anda
• "Order via WhatsApp" Bisa Anda ganti dengan Text susuai selera
• bottom:0px; Merupakan Posisi letah floating di bawa / Footer, jika ingin menempatkan-nya di Header maka silahkan Ganti 0px menjadi "top" sehingga penulisan-nya "bottom:top;"
• "background-color:#ffffff; merupakan background box floating, anda bisa merubah warna sesuai template yang kamu gunakan
• untuk Tag lainnya seperti Width, Height, padding, margin dan lainnya bisa ada sesuaikan sendiri sesuai selera.

Itulah cara membuat witget tombol Wa melayang atau yang biasa dikenal dengan Witget Floating Footer. Silahkan Anda modifikasi jika menurut Anda Html & CSS tersebut masih sederhana

 

NB:

Kode tersebut bisa dipasang pada bagian Footer, sidebar, dan dalam artikel. Untuk ukuran Silahkan Anda ubah pada bagian Tag Width.

Sekian tutorial yang mengenai cara membuat witget tombol Wa melayang. Mudah mudahan bisa membantu Anda untuk mempercantik halaman Blog sobat. Sekian dan Terimakasih.

Bagikan Artikel ini