Blogger Tag Conditional for Mobile, Menampilkan atau Menyembunyikan Widget di Mobile

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.
Tag Conditional Untuk Mobile

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:
Cara Menyembunyikan/Menampilkan Scritp atau Widget Tertentu pada Tampilan Mobile

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>

Update:

Untuk versi HTML Blogger terbaru, untuk menampilkan widget hanya di versi mobile/seluler bisa dilakukan dengan sisipkan kode berikut ini pada widget melalui Edit HTML:

cond='data:blog.isMobileRequest == &quot;true&quot;'

Contohnya seperti pada gambar berikut:
Tag Conditional untuk Menampilkan & Menyembunyikan Widget di Mobile

Untuk menyembunyikan widget tertentu di versi mobile/seluler tinggal ganti kode true pada kode di atas menjadi false.

Masih terkait: Menyembunyikan/Menampilkan Widget pada Halaman Tertentu di Blogger Terbaru

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;'>

Update:


Untuk tag conditional terbaru khusu menampilkan atau menyembunyikan widget atau HTML tertentu di versi mobile/hp, bisa dilakukan dengan tag kondisi berikut:

<b:if cond='data:view.isMobile'>

  // widget atau html disini

</b:if>

Untuk menyembunyikan, dapat dilakukan seperti ini:

<b:if cond='!data:view.isMobile'>

Atau begini:

<b:if cond='not data:view.isMobile'>

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.
Niagahoster
Starts from
$2.5
/Month

Vultr

Read Review
  • One-click installation of 20+ apps
  • Available 17 worldwide locations
  • 100% local SSD and high performance Intel CPUs
  • Infinite OS combinations
Visit Site
Gunakan link di atas untuk saldo akun $100 gratis
DigitalOcean
Starts from
$5
/Month

DigitalOcean

Read Review
  • Deploy custom image, RDP, 1-Click App, or standard distribution
  • Flexibility and scalability
  • Fantastic average uptime of 99.99%
  • Infinite OS combinations (Linux and Windows)
  • Developer-friendly tools and APIs
Visit Site
Topup $25 to gets $100 in credit over 60 days with refer link above
Niagahoster
Mulai dari
Rp10K
/Bulan

Niagahoster

View Details
  • Free SSL Certificate
  • Garansi 30 hari
  • Free domain & website migration
  • Tersedia unlimited disk space (shared hosting, kecuali paket bayi)
Visit Site
Diskon unlimited hosting hingga 75%
Niagahoster
VPS mulai dari
Rp68
/Jam

IDCloudHost

View Details
  • One-Click Deploy
  • Lokasi server Indonesia termurah
  • Instal berbagai Control Panel, VM, OS dan aplikasi
  • Menghubungkan dengan API
Visit Site
Dapatkan free credit Rp50K dengan minimal topup Rp50K
Free and premium blogger templates