Info Penting

Harga Domain Premium Rp. 10.000 Mau?

M emiliki blog pribadi atau blog bisnis dengan menggunakan domian premium tentu ada kebanggaan dan kepuasan tersendiri, untuk blog bisnis ...

Artikel Terbaru

Tombol Order WhatsApp Tampil Hanya di Handphone

7 Sep 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.

Tidak ada komentar:

Follow Me


Iklan Penyemangat

Koleksi Tutorial Blog

Arsip Blog