Cara Menampilkan / Menyembunyikan Widget Blog di Versi Mobile / Desktop

Beberapa hari lalu, saat saya mulai membangun template ini saya ingin menampilkan widget tertentu hanya di versi mobile saja. Setelah beberapa kali berselancar bersama mbah google, akhirnya saya menemukan 3 cara yang bisa kita lakukan untuk menampilkan atau menyembunyikan widget blog di versi mobile device.

Nah, 3 cara itu akan saya rangkum dalam artikel ini. Silahkan anda pilih sendiri kira-kira mana yang menurut anda mudah dan bagus untuk diterapkan.

1. Menggunakan Tag Conditional

Cara pertama yang bisa anda lakukan untuk menampilkan atau menyembunyikan widget blog di versi mobile adalah dengan menggunakan dua tag conditional berikut:

Menampilkan Widget di Versi Mobile / Menyembunyikan di Versi Desktop

<b:if cond='data:blog.isMobileRequest == "true"'>
----------------
</b:if>

Menyembunyikan Widget di Versi Mobile / Menampilkan di Versi Desktop

<b:if cond='data:blog.isMobileRequest == "false"'>
----------------
</b:if>

Untuk menerapkan kedua tag conditional diatas, perhatikan contoh berikut:

Misal saya ingin menyembunyikan widget di versi mobile/ menampilkan di versi desktop. Maka saya bisa menambahkan tag conditional diatas dalam kode HTML widget blog saya. Perhatikan susunan kode berikut:

<b:if cond='data:blog.isMobileRequest == "false"'>
<b:widget id='HTML1' locked='false' title='' type='HTML' version='1'visible='true'>
--------------------
</b:widget>
</b:if>

Baca juga : Cara Pasang Widget Blog Hanya di Halaman Tertentu

2. Menggunakan Tag Atribut

Cara lain yang bisa anda lakukan adalah dengan menambahkan tag atribut kedalam kode HTML widget blog anda. Caranya dengan menambah atribut mobile='yes', mobile='no' atau mobile='only'.

Berikut masing-masing fungsi dari ketiga atribut diatas:
mobile='yes' : menampilkan widget di versi mobile dan tetap tampil di versi desktop
mobile='no' : menyembunyikan widget di versi mobile
mobile='only' : menampilkan widget hanya di versi mobile

Untuk cara penerapannya, perhatikan contoh berikut:

Misal saya ingin menampilkan widget popular post hanya di versi mobile. Maka saya tambahkan atribut mobile='only' di kode widget popular post tersebut seperti ini

<b:widget id='PopularPosts1' locked='false' mobile='only' title='Popular Posts' type='PopularPosts' version='1'>
-----------------------
</b:widget>

3. Menggunakan CSS

Untuk menampilkan atau menyembunyikan widget blog di versi mobile anda juga bisa menggunakan CSS seperti berikut ini:

#idwidget {display:none;} 

Dimana "idwidget" merupakan id widget yang ingin anda tampilkan atau sembunyikan di versi mobile. Untuk bisa menerapkan cara ini anda perlu menerapkan kode tersebut bersamaan dengan CSS @media only screen. Cara penerapannya adalah sebagai berikut:

Misal, saya ingin menyembunyikan widget dengan id widget "HTML2" pada resolusi 728px kebawah, maka saya bisa menerapkan kode berikut seperti di bawah:

<style type='text/css'> 
@media only screen (max-width: 728px){
#HTML2 {display:none;} 
}
</style>

Letakkan kode tersebut, diatas kode </head>< atau &lt;/head&gt;&lt;!--<head/>--&gt;.

Nah, demikian tadi beberapa cara yang bisa anda lakukan untuk menampilkan atau menyembunyikan widget blog di versi mobile atau desktop. Selamat mencoba. Apabila ada yang kurang jelas dan ingin bertanya silahkan tulis pertanyaan anda di kolom komentar.