Info Penting

Aplikasi Yasin dan Tahlil No 1 di Google dan Playstore

A plikasi Yasin dan Tahlil terbaik nomor 1 di Google dan Playstore kaya akan fitur dan konten yang bermanfaat untuk amalan sehari-hari u...

Info Penting

Artikel Terbaru

Tombol Order WhatsApp Tampil Hanya di Handphone

7 Sep 2017 - - 1

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEim4o0wj4YRSMC2Lq3jNRfP6HezNP_TzdTmwAPlxNfBMZUcgcYhI7qEMul1vxMB3M0ibCjPXnE9EEq_bSZf29dDOiQTl5e_pR3WpbJlgq_61yMF_hWaj95trU8M3zRcqip-_7vl6U-k5wc/s1600/order+lewat+whatsapp.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.

1 komentar

  1. whoah this weblog is fantastic i like reading your articles.
    Stay up the good work! You understand, a lot of individuals are looking around
    for this information, you can aid them greatly.

    BalasHapus

Follow Me

Foto Mr. Mung
ttd Mr. Mung

Tutorial Blogger

Pilih Arsip Blog