Conditional Tag Khusus Tampilan Mobile

Tutorial blog kali ini tentang cara menyembunyikan atau menampilkan widget atau kode (JavaScript dan jQuery) tertentu pada template di devic...

Tutorial blog kali ini tentang cara menyembunyikan atau menampilkan widget atau kode (JavaScript dan jQuery) tertentu pada template di device mobile. Selain tag conditional untuk menampilkan widget tertentu yang hendak ditampilkan pada halaman tertentu dan tag conditional untuk JavaScript atau jQuery yang akan ditampilkan pada ukuran device tertentu, sebetulnya jauh sebelum itu kita telah diperkenalkan dengan tag conditional yang berfungsi untuk menampilkan atau menyembunyikan widget tertentu pada device mobile.

Hal ini sangat perlu diketahui, terutama bagi template creator yang masih kebingungan dalam menentukan penggunaan media query terhadap responsifitas sebuah template pada tampilan mobile yang sesungguhnya. Sebab, ukuran yang telah ditentukan pada media query tertentu untuk device tertentu terkadang meleset, yang kemudian membuat tampilan template menjadi berantakan. Terutama pada penggunaan menu (dropdown) untuk tampilan mobile.

Baca juga: Solusi Gambar Mengecil Saat Share Artikel ke Facebook

Namun, jika menggunakan tag conditional mobile secara khusus, maka hal itu tentu tidak perlu dikhawatirkan. Tag conditional mobile lebih tepat digunakan untuk menampilkan dropdown menu mobile, menampilkan widget tertentu pada perangkat mobile, dan atau memunculkan script tertentu pada versi mobile.

Perlu diketahui pula, ukuran device yang dihitung mobile oleh tag conditional ini meliputi device tablet, smartphone, hamdphone, blackberry dan lainnya. Selain itu, perlu diingat bahwa tag contional khusus mobile ini dapat digunakan untuk menampilkan/menyembunyikan widget tertentu, CSS tertentu, HTML tertentu, serta JavaScript dan jQuery tertentu.

Bagi yang tertarik untuk memasang tag conditional tersebut, silahkan lihat pada tulisan berikut ini.

Menampilkan widget atau script tertentu pada versi mobile

Untuk menampilkan widget atau scrip tertentu, tag conditonalnya adalah sebagai berikut.

<b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>

Cara penggunaanya sama dengan menggunakan tag conditional pada umumnya, yaitu diletekkan diantara widget, CSS, JavaScript dan jQuery tertentu.

Contoh menampilkan widget tertentu hanya akan muncul pada tampilan mobile saja:

Contoh menampilkan CSS, HTML, JavaScript atau jQuery pada versi mobile:

<b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>
Kode CSS, HTML, JavaScript atau jQuery diletakkan disini
</b:if>

Menyembunyikan widget atau script tertentu pada versi mobile

Tag conditional berikut ini adalah kebalikan dari fungsi tag conditional di atas, yaitu tidak akan memunculkan kode atau widget tertentu pada versi mobile.

<b:if cond='data:blog.isMobileRequest == &quot;false&quot;'>

Cara penggunaannya sama dengan cara di atas, hanya fungsinya saja yang berbeda.

Demikian informasi tentang Tag Conditional untuk Menampilkan atau Menyembunyikan Widget dan Script tertentu pada Versi Mobile, semoga bermanfaat dan sukses selalu.