Membuat Kode Order via WhatsApp di Blog Bisnis, namun pada isyarat order via whatsapp tersebut tombol whatsapp akan tampil disemua perangkat yang dipakai untuk membuka website bisnis kita, baik dibuka memakai laptop maupun handphone/ smartphone.
Pertanyaanya:
Bagaimana cara mengatur supaya tombol order whatsapp hanya akan tampil jikalau dibuka melalui handphone atau smartphone saja, dan akan disembunyikan ketika dibuka melalui laptop?
Untuk menjawab pertanyaan tersebut, kita dapat dengan memadukan tombol order whatsApp dengan isyarat css responsive, untuk problem ini aku anggap template blog anda sudah responsive, dan hal ini dapat anda cek di dalam isyarat template blog anda akan ada isyarat menyerupai dibawah ini:
@media only screen and (max-width:
Itu artinya blog anda sudah responsive dan anda dapat melanjutkan dengan mengikuti pembahasan ini, pertama silahkan tambahkan div id pada isyarat berikut:
Kemudian pada CSS template anda, silahkan anda tambahkan isyarat css berikut:
Sedangkan untuk css responsivenya silahkan anda tambahkan #orderwa {display:block;} sebagai contoh:
Untuk hasilnya, silahkan anda coba halaman ini dengan memakai handphone/ smartphone dan juga laptop anda, akan akan melihat tombol order whatsApp dibawah ini:
Demikian, selamat mencoba supaya berhasil.
Pertanyaanya:
Bagaimana cara mengatur supaya tombol order whatsapp hanya akan tampil jikalau dibuka melalui handphone atau smartphone saja, dan akan disembunyikan ketika dibuka melalui laptop?
Untuk menjawab pertanyaan tersebut, kita dapat dengan memadukan tombol order whatsApp dengan isyarat css responsive, untuk problem ini aku anggap template blog anda sudah responsive, dan hal ini dapat anda cek di dalam isyarat template blog anda akan ada isyarat menyerupai dibawah ini:
<head>
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
Dibagian isyarat CSS nya juga akan ditemukan isyarat menyerupai ini:<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
@media only screen and (max-width:
Itu artinya blog anda sudah responsive dan anda dapat melanjutkan dengan mengikuti pembahasan ini, pertama silahkan tambahkan div id pada isyarat berikut:
<div id="orderwa"> <a href="https://api.whatsapp.com/send?phone=6285640335006&text=Saya%20Mau%20Order"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZCdmGx6FyKNLbmDHo1DHmIpc5YRJT4d6qjJBDrHwaADzTvknD_CUeiDR847lq5YQ3U5AsJkoaTzQWtlT5wYAbHqmlYYeYM0ZX5usecvjerebjwSrMMv7FfNaFHrHJdhxDGHBRsAK-CIg/s1600/order+lewat+whatsapp.png"/></a> </div>
Kemudian pada CSS template anda, silahkan anda tambahkan isyarat 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;} }
{ #orderwa {display:block;} }
Untuk hasilnya, silahkan anda coba halaman ini dengan memakai handphone/ smartphone dan juga laptop anda, akan akan melihat tombol order whatsApp dibawah ini:
Demikian, selamat mencoba supaya berhasil.
0 Response to "Tombol Order Whatsapp Tampil Hanya Di Handphone"
Post a Comment