Cara Menyembunyikan Widget Pada Tampilan Mobile

shares |

Loading...
Hai Sobat danifin, Loading blog anda lambat di saat dibuka menggunakan HP? Nah, mungkin kebanyakan widget di blog anda, Agar blog kita dapat cepat di akses menggunakan browser mobile maka kita dapat mendisable/menonaktifkan widget-widget yang tidak terlalu penting bagi tampilan mobile yang bisa memperlambat blog ketika di muat menggunakan browser mobile. Dengan anda menonaktifkan beberapa widget pada versi mobile, Mungkin dapat membantu mempercepat dimuatnya halaman blog kita ketika blog anda diakses menggunakan browser mobile. Sekadar mengingatkan saja, trik ini hanya berlaku untuk perangkat smartphone, dan tidak berlaku untuk tablet, iPad dll. Ok langsung saja tutorialnya adalah.

Cara Menyembunyikan Widget Pada Tampilan Blog Versi Mobile


1. Akses Blogger
2. Klik menu Tata letak pada blogger, Pilih widget yang ingin kamu sembunyikan.
3. Klik pada widget tersebut dan setelah itu akan muncul popup

4. Perhatikan id widgetnya, misalnya contoh disini yang akan saya sembunyikan Header1
5. Klik menu Template kemudian Edit HTML

6. Kilik menu Lompat Widget (Jump to Widget) kemudian temukan widget Id tadi yang ingin kamu sembunyikan (misalnya tadi HTML3).

7. Kamu akan di bawah pada kode widget

8. Misalnya kode yang kamu dapatkan adalah seperti dibawah ini:
Script:
<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>


9. Tambahkan tag kondisional isMobileRequest (<b:if cond='data:blog.isMobileRequest == "false"'>) dibawah <b:includable id='main'>, 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>

10. Save dan selesai.

Tambahan : Cara Menonaktifkan Script Pada Tampilan Mobile Blog Melalui Layout/Tata Letak

Ada beberapa widget tertentu memiliki javascript atau jQueri, maka akan lebih baik lagi jika kamu menonaktikan script yang tidak diperlukan pada tampilan mobile blog, jika anda mau menyembunyikan widget tapi anda 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 ini:
<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.

Semoga dengan trik ini blog anda akan lebih cepat diakses di tampilan mobile.

0 comments: