Cara menyembunyikan/menonaktifkan Widget Blog pada Versi Mobile

Haisob apa kabar? pada kesempatan ini saya akan berbagi tentang Cara menyembunyikan / menonaktifkan Widget Blog pada Versi Mobile. Oh iya sob, agar blog kita cepat di akses menggunakan browser mobile maka kita dapat menonaktifkan widget-widget yang tidak terlalu penting yang bisa memperlambat blog ketika di muat menggunakan browser mobile.

Dengan menonaktifkan beberapa widget pada fersi mobile, hal ini dapat membantu mempercepat dimuatnya halaman blog kita ketika diakses menggunakan browser mobile.  Oh yah, trik ini hanya berlaku untuk perangkat smartphone, dan tidak berlaku untuk tablet, iPad dll.

Baca juga: Cara membuat daftar isi sederhana dibagi berdasarkan label blog

Cara Menyembunyikan Widget Pada Tampilan Blog Versi Mobile


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
Widget ID = HTML3

4. Pilih menu Template ➔ Edit HTML
Cara menyembunyikan/menonaktifkan Widget Blog pada Versi Mobile
Template - Edit HTML

Baca juga: Cara membuat pulse loading animation

5. Temukan/cari  widget Id tadi yang ingin kamu sembunyikan (misalnya tadi HTML3)

kode widget
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 dan selesai.

Baca juga: Cara membuat fixed background blog

Tambahan : Menonaktifkan Script Pada Tampilan Mobile Blog


Beberapa widget tertentu memiliki javascript atau jQueri, maka akan lebih baik lagi jika kamu menonaktikan script yang tidak diperlukan pada tampilan mobile blog, jika kamu menyembunyikan widget tapi lupa menonaktifkan script, maka javascript tersebut akan tetap di load di latar belakang sehingga memperlambat loading blog. Nah untuk menonaktifkannya kamu dapat menggunakan tag kondisional isMobileRequest ini.

Gunakan sintaks berikut:
<b:if cond='data:blog.isMobileRequest == "false"'>
JavaScript untuk Sembunyikan
</b:if>
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.