2 Cara Show Hide Widget Blog Versi Mobile Seluler

Sobat pastinya sudah tahu bahwa sebagian besar pengguna internet sekarang adalah pengguna HP / Smartphone / Mobile phone. Dengan menonaktifkan beberapa widget pada versi mobile, hal ini dapat membantu mempercepat dimuatnya halaman blog kita ketika diakses menggunakan browser mobile.

Kita dapat menonaktifkan widget-widget yang tidak terlalu penting yang bisa memperlambat load blog pada blog versi mobile, agar blog lebih ringan saat di load menggunakan Mobile Phone. Pada kesempatan ini saya akan membagikan 2 cara menyembunyikan dan menampilkan widget pada blog tampilan versi mobile.

2 Cara Menampilkan dan Menyembunyikan Widget Blog Versi Mobile / Seluler

How to Hide/Show Widget on Mobile in Blogger

1# Menambahkan Elemen Mobile Yes, No dan Only

Cara yang satu ini terbilang sangatlah mudah, kita hanya perlu menambahkan elemen baru didalam tag <b:widget>. Elemen yang akan kita tambahkan adalah mobile, ada tiga value yang dapat digunakan untuk elemen mobile ini, sebagai berikut:

• mobile=’yes’ untuk menapilkan widget di versi seluler.
• mobile=’no’ Widget tidak ditampilkan pada halaman versi seluler.
• mobile=’only’ dimana widget hanya ditampilkan pada versi seluler saja.

Caranya:
Masuk ke Template ➔ Edit HTML kemudian temukan widget mana yang ingin kamu tampilkan di versi mobile. Misalnya kode widgetnya adalah seperti dibawah ini:

    <b:widget id='HTML2' locked='false' title='Random Post' type='HTML'>      <b:includable id='main'>
......
</b:includable>
    </b:widget>

Tambahkan kode mobile=’yes’ sehingga menjadi :

  <b:widget id='HTML2'  mobile=’yes’ locked='false' title='Random Post' type='HTML'>      <b:includable id='main'>
......
</b:includable>
    </b:widget>

Save template dan lihat hasilnya.

Untuk menyembunyikan kamu bisa menghapus mobile="yes" atau menggunakan atribut mobile="no".

2# Menggunakan Tag Kondisional isMobileRequest

1. Di Blog Blogger
2. Klik menu Tata letak, Pilih widget yang ingin kamu sembunyikan.
3. Klik pada widget tersebut dan akan muncuk popup (perhatikan widget id) misalnya contoh disini HTML 3

Widget ID = HTML3

4. Pilih menu Template ➔ Edit HTML
5. Temukan/cari  widget Id tadi yang ingin kamu sembunyikan (misalnya tadi HTML3)

HTML3

6. Misalnya kode yang kamu dapatkan adalah seperti dibawah ini:

<b:widget id='HTML3' locked='false' title='Back at Home' type='HTML'>
                  <b:includable id='main'>
                    <!-- only display title if it's non-empty -->
                    <b:if cond='data:title != &quot;&quot;'>
                      <h2 class='title'> <data:title/>
                      </h2>
                    </b:if>
                    <div class='widget-content'>
                      <data:content/>
                    </div>
                    <b:include name='quickedit'/>
                   </b:includable>
                </b:widget>

7. Tambahkan tag kondisional isMobileRequest, sehingga menjadi seperti dibawah ini:

<b:widget id='HTML3' locked='false' title='Back at Home' 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 != &quot;&quot;'>
                      <h2 class='title'><data:title/>
                      </h2>
                    </b:if>
                    <div class='widget-content'>
                      <data:content/>
                    </div>
                    <b:include name='quickedit'/>
                    </b:if> 
                  </b:includable>
                </b:widget>

8. Save.

Tag kondisonal diatur menjadi false yang berarti script tidak akan dimuat dalam perangkat Ponsel tetapi akan memuat dalam Desktop dan Laptop, jika kamu ingin sebaliknya silahkan ganti false menjadi true.

Sekian 2 cara menyembunyikan dan menampilkan widget blog pada tampilan versi mobile, semoga bermanfaat.