Cara Menyembunyikan Bilah Sisi (Sidebar) pada Halaman Tertentu di Blogger

Jika Anda mencari tutorial untuk menghapus Sidebar, sebagian besar akan menyarankan kode CSS seperti display: none;. Cara tersebut memang berhasil menyembunyikan elemen secara visual, tetapi sebenarnya itu adalah cara yang salah.


Properti display dalam CSS bukan sekadar atribut visual biasa. Properti ini menetapkan seluruh mode render dari sebuah elemen (apakah berupa block, inline, inline-block, table, atau list-item).

Meskipun menggunakan display: none; akan membuat elemen sidebar hilang dari pandangan pembaca, elemen tersebut tetap ada di dalam kode sumber (source code) halaman. Sistem akan tetap memuat seluruh data, skrip, dan gambar di dalam sidebar tersebut saat pembaca membuka halaman. Jika tujuan Anda menyembunyikan sidebar adalah untuk meningkatkan kecepatan pemuatan (loading speed) halaman, metode CSS ini tidak akan berpengaruh sama sekali.

Cara yang benar adalah mencegah sistem Blogger merender area sidebar tersebut sejak awal menggunakan tag kondisi (conditional tag).

Langkah 1: Menemukan Nama Bagian Sidebar

Setiap widget di Blogger berada di dalam tag <b:section>, dan bilah sisi Anda adalah sebuah wadah (section) yang menampung semua widget sidebar tersebut.

Contoh struktur kode bagian sidebar:

<b:section class='sidebar' id='sidebar_feed' name='Sidebar' showaddelement='yes'>
       <b:widget>
            ...
       </b:widget>
</b:section>

Untuk mempermudah pencarian kodenya, silakan cek menu Tata Letak (Layout) pada dasbor Blogger Anda terlebih dahulu untuk melihat apa nama dari bagian sidebar tersebut (misalnya: sidebar-right-1). setelah itu, masuk ke menu Tema -> Edit HTML, lalu cari nama tersebut di dalam baris kode template Anda.

Langkah 2: Mengimplementasikan Atribut Kondisi (cond)

Setelah menemukan tag pembuka <b:section> untuk sidebar Anda, tambahkan atribut cond di dalam tag tersebut. Atribut ini berfungsi sebagai pengendali logika kapan sebuat area boleh dimuat oleh sistem.

Berikut adalah beberapa variasi implementasi atribut kondisi yang bisa Anda gunakan sesuai kebutuhan:

1. Menyembunyikan Sidebar di Halaman Beranda (Homepage)

Gunakan operator ketidaksamaan (tanda seru !) diikuti dengan data:view.isHomepage:

<b:section cond='!data:view.isHomepage' class='sidebar' id='sidebar_feed' name='Sidebar' showaddelement='yes'>

2. Menyembunyikan Sidebar di Halaman Statis (Static Page)

<b:section cond='!data:view.isPage' class='sidebar' id='sidebar_feed' name='Sidebar' showaddelement='yes'>

3. Menyembunyikan Sidebar di Halaman Hasil Pencarian (Search Page)

<b:section cond='!data:view.isSearch' class='sidebar' id='sidebar_feed' name='Sidebar' showaddelement='yes'>

4. Menyembunyikan Sidebar di Beranda SEKALIGUS Halaman Statis

Anda bisa menggunakan operator logika or atau and untuk menggabungkan dua atau lebih kondisi: 
<b:section cond='!data:view.isHomepage or !data:view.isPage' class='sidebar' id='sidebar_feed' name='Sidebar' showaddelement='yes'>

Menyembunyikan Sidebar di Artikel atau Halaman Statis Spesifik

> 📌 Catatan: Saat Anda membuat postingan atau halaman statis, lihatlah bilah alamat (address bar) browser Anda untuk mendapatkan nomor ID unik dari postingan (postId) atau halaman (pageId) tersebut. Ganti angka contoh di bawah ini dengan nomor ID unik Anda sendiri.

1. Menyembunyikan Sidebar di Postingan/Artikel Tertentu

<b:section cond='data:view.postId != 123456' class='sidebar' id='sidebar_feed' name='Sidebar' showaddelement='yes'>

2. Menyembunyikan Sidebar di Halaman Statis Tertentu

<b:section cond='data:view.pageId != 123456' class='sidebar' id='sidebar_feed' name='Sidebar' showaddelement='yes'>

3. Menyembunyikan Sidebar di Beberapa Artikel Pilihan Sekaligus

Gunakan operator logika not in diikuti dengan susunan array nomor ID:

<b:section cond='data:view.postId not in [123456,234567,345678]' class='sidebar' id='sidebar_feed' name='Sidebar' showaddelement='yes'>

4. Menyembunyikan Sidebar di Beberapa Halaman Statis Pilihan Sekaligus

<b:section cond='data:view.pageId not in [123456,234567,345678]' class='sidebar' id='sidebar_feed' name='Sidebar' showaddelement='yes'>

Diskusi & Solusi Alternatif (Tips Lanjutan)

Bagi Anda yang ingin menyembunyikan elemen berdasarkan parameter URL tertentu (misalnya, menyembunyikan sidebar ketika URL mengandung parameter tambahan seperti ?exclude), penggunaan data:view.url contains tidak didukung langsung secara efisien pada atribut kondisional elemen structural Blogger bawaan.

Solusi terbaik untuk manipulasi berdasarkan parameter URL kustom yang fleksibel tetap disarankan menggunakan conditional rendering tingkat widget (<b:widget>) atau menggunakan injeksi kelas utilitas melalui JavaScript/CSS secara dinamis saat halaman dimuat.

Lokasi: Malang, Kota Malang, Jawa Timur, Indonesia

Komentar

Posting Komentar

Postingan populer dari blog ini

Membuat Beranda Asli untuk Blog Blogger (Blogspot)

Gambar
Halaman beranda ( homepage ), landing page , atau halaman yang dimuat saat pembaca mengunjungi URL utama blog Anda, dapat membantu blog mendapatkan lebih banyak pengunjung. Fitur ini berguna untuk membuat blog memuat lebih cepat, mendapatkan lebih banyak pelanggan ( subscriber ), memperkenalkan tajuk utama blog, atau membuat tampilan blog Anda terlihat lebih profesional.
Baca selengkapnya

Tag Widget untuk Tata Letak

Bila menggunakan tema Tata Letak untuk membuat bagian badan blog, Anda dapat menggunakan widget untuk menambahkan elemen halaman seperti gambar dan blogroll. Jenis tag Bagian ini menjelaskan HTML yang dapat Anda gunakan dalam tag penutup Blogger. 1. Include ( b:include & b:includable ) Kapan include digunakan Include paling berguna jika Anda memiliki bagian dari kode yang ingin digunakan kembali di beberapa tempat yang berbeda, atau hanya disertakan dalam keadaan tertentu. Untuk melakukannya, tulis konten dalam b:includable , lalu gunakan b:include di tempat Anda ingin menampilkannya. Format <b:includable id='main' var='thiswidget'> [sisipkan konten yang Anda inginkan di sini] </b:includable> Atribut id (wajib): Pengenal unik yang terdiri dari huruf dan angka. Setiap widget harus memiliki satu includable dengan id='main' . var (opsional): Pengenal yang terdiri dari huruf dan angka, untuk referensi data dalam bagian ini. Ca...
Baca selengkapnya

Tag Data Tata Letak

Ada berbagai tag yang dapat Anda gunakan untuk menyertakan data tertentu dalam template. Semuanya akan diformat sebagai ` ` atau ` `, dengan `name` adalah nama data tertentu yang ingin Anda gunakan. Dalam contoh `name1.name2`, `name2` merupakan item tertentu yang ada di dalam set data bernama `name1`, misalnya `photo.url`. Karena tiap jenis widget menggunakan data yang berbeda, daftar utama dari semua data yang tersedia ini dibagi menjadi beberapa bagian berdasarkan elemen halaman: * [Data yang Tersedia secara Global](https://www.google.com/search?q=%23data-yang-tersedia-secara-global) * [Header Halaman](https://www.google.com/search?q=%23header-halaman) * [Postingan Blog](https://www.google.com/search?q=%23postingan-blog) * [Arsip Blog](https://www.google.com/search?q=%23arsip-blog) * [Widget Profil](https://www.google.com/search?q=%23widget-profil) * [Widget Teks/HTML/JavaScript](https://www.google.com/search?q=%23widget-tekshtmljavascript) * [Widget Feed](https://www.google.com/s...
Baca selengkapnya