Tombol Order WhatsApp Tampil Hanya di Handphone

Kamis, 07 September 2017 - -

Pada posting sebelumnya sudah saya bahas tentang cara Membuat Kode Order via WhatsApp di Blog Bisnis, namun pada kode order via whatsapp tersebut tombol whatsapp akan tampil disemua perangkat yang digunakan untuk membuka website bisnis kita, baik dibuka menggunakan laptop maupun handphone/ smartphone.

Pertanyaanya: 
Bagaimana cara mengatur supaya tombol order whatsapp hanya akan tampil jika dibuka melalui handphone atau smartphone saja, dan akan disembunyikan saat dibuka melalui laptop?

Untuk menjawab pertanyaan tersebut, kita bisa dengan memadukan tombol order whatsApp dengan kode css responsive, untuk masalah ini saya anggap template blog anda sudah responsive, dan hal ini bisa anda cek di dalam kode template blog anda akan ada kode seperti dibawah ini:
<head>
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
Dibagian kode CSS nya juga akan ditemukan kode seperti ini:
@media only screen and (max-width:

Itu artinya blog anda sudah responsive dan anda bisa melanjutkan dengan mengikuti pembahasan ini, pertama silahkan tambahkan div id pada kode berikut:

<div id="orderwa"> <a href="https://api.whatsapp.com/send?phone=6285640335006&amp;text=Saya%20Mau%20Order"><img src="https://2.bp.blogspot.com/-_A6eHtF2uGQ/WY4wV1vOEVI/AAAAAAAARqY/Q_6BJbkmWYEtFHklydscYQXXscC2s5f-ACLcBGAs/s1600/order%2Blewat%2Bwhatsapp.png"/></a> </div>

Kemudian pada CSS template anda, silahkan anda tambahkan kode css berikut:
#orderwa{display:none;}


Sedangkan untuk css responsivenya silahkan anda tambahkan #orderwa {display:block;} sebagai contoh:

@media only screen and (max-width: 500px)
{ #orderwa {display:block;} }


Untuk hasilnya, silahkan anda coba halaman ini dengan menggunakan handphone/ smartphone dan juga laptop anda, akan akan melihat tombol order whatsApp dibawah ini:

Demikian, selamat mencoba semoga berhasil.

Silahkan tinggalkan komentar anda disini dan Terimakasih anda mau menuliskan nama anda.

Koleksi Tutorial Blog

Arsip Blog