2 Cara menyembunyikan dan menampilkan widget blog pada tampilan versi mobile

Haisob apa kabar? pada kesempatan ini saya akan membagikan 2 cara menyembunyikan dan menampilkan widget pada blog tampilan versi mobile. Sobat pastinya sudah tahu bahwa sebagian besar pengguna internet sekarang adalah pengguna smartphone/handphone.

Dengan menonaktifkan beberapa widget pada fersi 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 smartphone/handphone.

2 Cara menyembunyikan dan menampilkan widget blog pada tampilan versi mobile
2 Cara menyembunyikan dan menampilkan widget blog pada tampilan versi mobile

Cara 1 : Menyembunyikan dan Menampilkan Widget pada blog versi mobile



Ada beberapa kode atau atribut pilihan pada blog versi seluler:
  • mobile=’yes’ untuk menapilkan widget di versi seluler.
  • mobile=’no’ tidak ditampilkan pada halaman versi seluler.
  • mobile=’only’ dimana widget hanya ditampilkan pada versi seluler saja.

Baca juga: Cara membuat komentar terbaru dengan avatar di blogger

Untuk menampilkan widget pada versi mobile kamu dapat mencoba cara pertama ini:

Masuk ke edit HTML template blog 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>
Simpan template dan lihat hasilnya.

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

Cara 2 : Menyembunyikan dan Menampilkan Widget pada 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

Baca juga: Cara membuat smart link di Blogger

4. Pilih menu Template ➔ Edit HTML
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 mengetahui nilai DA dan PA suatu Blog

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.
Join This Site