Cara Menyembunyikan atau Menampilkan Widget Pada Tampilan Mobile Device - Pada kesempatan kali ini, saya akan kembali mengulas seputar dunia blogging. Bagi yang tidak mengetahui efeknya mungkin artikel ini tidak terlalu menarik, tetapi bagi yang mengerti akan efeknya mungkin akan tertarik.
Seperti yang kita ketahui sesuai perkembangan zaman bahwa perangkat mobile sudah menjadi bahan pokok bagi setiap orang sebagai alat komunikasi atau mencari informasi yang dapat bermanfaat bagi penggunanya.
Banyak dari para webmaster membuat membuat situs yang Mobile Friendly, dan juga Responsive agar dapat cepat diakses dan tentunya lebih nyaman melalui perangkat mobile, tentunya hal ini merupakan langkah positif dan sebagai pondasi awal dalam membangun sebuah website.
Trik ini memang bisa sobat lakukan dengan menambahkan tag CSS display:none pada widget yang akan disembunyikan pada tampilan mobile dengan resolusi tertentu, namun dengan tutorial yang akan saya berikan ini pasti lebih mudah dan lebih praktis untuk diterapkan pada blog kalian.
Trik ini hanya berlaku untuk perangkat smartphone saja, dan tidak akan berpengaruh pada perangkat tablet, ipad, dan lainnya.
Menyembunyikan Widget Pada Perangkat Mobile Device
Tentukan widget apa yang akan kalian sembunyikan pada perangkat mobile device. Contohnya disini saya akan menyembunyikan widget HTML1 didalam template dengan penulisan tag konditional seperti berikut ini.
<b:widget id='HTML1' locked='false' title='' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.isMobileRequest == "false"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
</b:if>
</b:includable>
</b:widget>Menampilkan Widget Pada Perangkat Mobile Device
Seperti diatas, tentukan widget mana yang akan kalian sembunyikan pada perangkat mobile, dengan contoh yang sama saya akan menyembunyikan widget HTML1 didalam template dengan penulisan tag konditional seperti berikut ini.
<b:widget id='HTML1' locked='false' title='' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.isMobileRequest == "true"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
</b:if>
</b:includable>
</b:widget>Sebenarnya trik ini hanya merubah kode False pada tag konditional awal, untuk menyembunyikan dan True untuk menampilkan
Jika tutorial diatas masih kurang dimengerti, silahkan tanyakan melalui kolom komentar dibawah artikel ini.
Sekian artikel dari Cara Menyembunyikan atau Menampilkan Widget Pada Tampilan Mobile Device, semoga bisa bermanfaat bagi kalian semua para blogger.
Terima Kasih
