√ Cara Menyembunyikan Widget Blog di Tampilan Seluler

Amaterasublog.com,- Hallo teman-teman blogger, pada kesempatan kali ini saya akan mengulas tentang Cara Menyembunyikan Widget Blog di Tampilan Seluler. Cara yang akan saya sajikan berikut adalah cara yang sangat mudah sekali untuk diaplikasikan oleh teman-teman blogger.

Sebagaimana yang kita ketahui bersama, mode tampilan seluler/mobile suatu blog itu berbeda dengan mode tampilan desktop/pc, khususnya bagi teman-teman blogger yang memakai template blogger responsive mobile friendly seperti template blog yang saya pakai ini.

Mengingat widget yang terlalu banyak membuat tampilan blog di browser seluler akan terlihat acak-acakan (tidak rapih) serta dapat membuat kinerja suatu blog juga akan menjadi lambat. Jika hal tersebut terjadi maka akan berimbas terhadap menurunnya traffic blog, karena loading blog yang lambat maka akan mudah ditinggalkan oleh para pengunjung yang hendak mencari informasi di blog kita.

Untuk meminimalisir kinerja loading blog di tampilan seluler salah satunya dengan menyembuyikan beberapa widget blog agar loading blog di tampilan seluler menjadi lebih ringan. Langsung saja berikut adalah cara-caranya :

Cara Menyembunyikan Widget Blog di Tampilan Seluler

#Tutorial:

1. Buka dashboard blogger Tata Letak.

2. Pilih widget blog yang akan kita sebunyikan Kemudian klik Edit.

3. Setelah terbuka, lihat kode html dari widget yang akan kita sembunyikan. Lihat contoh gambar di bawah ini :

Lihat kode html

4. Selanjutnya masuk ke Menu Template/Tema Edit HTML Lompat Widget, pilih kode widget yang tadi dilihat di Tata Letak.

Cara Menyembunyikan Widget Blog di Tampilan Seluler/Mobile

Pilih widget yang akan disembunyikan

5. Jika sudah ketemu “klik” tanda panah kecil berwarna hitam, maka akan terbuka semua kode widget yang akan kita sembunyikan. Tapi jika masih ada tanda panah setelah diklik, coba klik lagi saja sampai seluruh kode widget tadi terbuka semua. Lihat contoh gambar di bawah ini :

Klik tanda panah kecil berwarna hitam

6. Kemudian tahap selanjutnya adalah menambahkan kode CSS berikut ini [kodenya yang berwarna kuning] tambahkan tepat di bawah kode <b:includable id='main'> dan kemudian tambahkan juga </b:if> di bawah kode <data:content/> </div>. Contohnya bisa dilihat di bawah ini :

</b:widget-setting>
    </b:widget-settings>
    <b:includable id='main'>
<b:if cond='data:blog.isMobileRequest == &quot;false&quot;'>
  <!-- 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:if>
  <b:include name='quickedit'/>
</b:includable>
  </b:widget>

7. Terakhir Klik Save Template.
8. Selesai

Lihat contoh gambar mengenai widget banner yang saya sembunyikan di tampilan seluler dengan menggunakan cara-cara di atas.

Menyembunyikan widget banner di tampilan mobile

Contoh menempatan kode css untuk menyembunyikan widget di tampilan seluler

Penutup ...

Mungkin cukup sekian ulasan artikel tentang Cara Menyembunyikan Widget Blog di Tampilan Seluler. Jika di dalam artikel ini ditemukan salah pengertian atau istilah lainnya yang berhubungan dengan ulasan artikel di atas mohon dikrokesi dengan menginggalkan komentar di bawah. Semoga bermanfaat :-)