Info Penting

Uraian Kalender Pendidikan Tahun Pelajaran 2018/2019

P ada posting sebelumnya sudah saya bagikan kepada anda Pedoman Penyusunan Kalender Pendidikan Tahun Pelajaran 2018/2019 untuk provinsi Jawa...

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://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.

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


Iklan

Koleksi Tutorial Blog

Arsip Blog