5 Cara Menghilangkan Sidebar di Blogger Dengan Gampang

Sebagian besar desain template blogger memiliki sidebar pada sebelah kanan maupun kiri, ada juga beberapa blog yang tanpa memiliki sidebar atau full width 100%, sehingga Anda bisa melihat secara penuh tampilan blog tersebut.
Mungkin ada beberapa di antara kalian yang ingin membuat sebuah landing page di halaman blog maupun di postingan blog.

Landing page biasanya dibuat dengan lebar full tanpa adanya sidebar, ini bertujuan agar pengunjung lebih fokus terhadap apa yang ingin ada tampilkan pada landing page tersebut.

Oleh karena itu jika template atau desain blog Anda memiliki sidebar maka Anda harus secara manual menghapus sidebar tersebut jika ingin menghilangkannya atau menyembunyikannya.

Sebelumnya saya pernah membuat artikel tentang cara membuat tabel daftar harga, dengan desainnya yang begitu lebar sehingga jika dipasang pada bagian postingan akan menyempit sehingga kurang enak dilihat.

Jadi untuk mendapatkan hasil yang bagus tabel tersebut perlu dipasang pada blog yang memiliki lebar full atau blog yang tidak memiliki sidebar.

Tapi kalau blog Anda memiliki sidebar kita juga bisa menghilangkannya dengan menggunakan beberapa cara yang akan saya sampaikan pada artikel ini.

Ada lima cara untuk menghilangkan sidebar blog, Anda bisa melihatnya pada daftar isi di bawah ini.

Kelima cara tersebut dapat menghilangkan sidebar blog Anda.

Disini saya akan menghilangkan sidebar blog dengan menggunakan kode css ditambah dengan fungsi dari kode tag kondisional.

Perlu Anda ketahui bahwa alangkah baiknya Anda belajar terlebih dahulu mengenai fungsi dari tag kondisional di blogger sehingga akan lebih mudah memahaminya.

Baik kita mulai saja, bagi Anda yang ingin menghilangkan sidebar blognya mungkin bisa mengikuti langkah-langkahnya di bawah ini.

1. Menghapus Sidebar di Halaman Beranda / Homepage Blog

Jika Anda tidak ingin menampilkan sidebar di halaman beranda atau homepage blog Anda, mungkin bisa menggunakan cara ini.

Silahkan masuk ke Blogger.com > klik Tema > klik Edit HTML > simpan kode ini di atas kode </head> > klik Simpan tema dan lihat hasilnya.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style>
#sidebar, #sidebar-wrapper, .sidebar, .sidebar-wrapper{display:none}
</style>
</b:if>

Kode sidebar dan sidebar-wrapper merupakan kode ID dan Class yang umum di pakai di berbagai template blog, mungkin ada beberapa template blog lain yang menggunakan kode lain sehingga tidak akan bisa menerapkan kode di atas.

Akan lebih baik apabila Anda mengetahui fungsi dari ID atau Class pada bahasa pemrograman HTML sehingga akan lebih mudah memahaminya.

2. Menghapus Sidebar di Halaman Postingan Blog

Jika Anda tidak ingin menampilkan sidebar blog ketika berada di halaman posting, Anda bisa mencoba dengan menggunakan cara ini.

Silahkan masuk ke Blogger.com > klik Tema > klik Edit HTML > simpan kode ini di atas kode </head> > klik Simpan tema dan lihat hasilnya.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
#sidebar, #sidebar-wrapper, .sidebar, .sidebar-wrapper{display:none}
</style>

Back to Content ↑

3. Menghapus Sidebar di Halaman Statis / Static Page Blog

Jika Anda tidak ingin menampilkan sidebar blog di halaman statis atau static page, Anda bisa menggunakan cara ini untuk menghilangkan atau menyembunyikan sidebar blog Anda.

Silahkan masuk ke Blogger.com > klik Tema > klik Edit HTML > simpan kode ini di atas kode </head> > klik Simpan tema dan lihat hasilnya.

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<style>
#sidebar, #sidebar-wrapper, .sidebar, .sidebar-wrapper{display:none}
</style>
</b:if>

Back to Content ↑

4. Menghapus Sidebar di Semua Halaman Blog

Jika Anda tidak ingin menampilkan sidebar blog di semua halaman blog, maka Anda bisa mencoba menggunakan cara ini agar sidebar blog tidak tampil di seluruh halaman blog Anda.

Silahkan masuk ke Blogger.com > klik Tema > klik Edit HTML > simpan kode ini di atas kode </head> > klik Simpan tema dan lihat hasilnya.

<style>
#sidebar, #sidebar-wrapper, .sidebar, .sidebar-wrapper{display:none}
</style>

Back to Content ↑

5. Menghapus Sidebar di Halaman Tertentu (Custom)

Anda bisa menghapus sidebar di blog Anda hanya di beberapa halaman tertentu, misalnya di halaman beranda, halaman posting, halaman statis yang sudah saya jelaskan pada nomor 1 sampai nomor 3.

Selain itu Anda juga bisa menentukan atau menyesuaikan dengan keinginan Anda agar sidebar blog tidak di tampilkan pada halaman tertentu misalnya, halaman index, halaman label, halaman arsip dan lainnya.

Anda hanya perlu mengetahui beberapa kode tag kondisional yang sudah saya jelaskan pada postingan sebelumnya tentang Kumpulan Kode Tag Conditional Blogger.

Untuk cara penerapannya sama seperti pada nomor 1 sampai nomor 3.

Back to Content ↑

Beberapa cara di atas bisa Anda coba untuk menghapus atau menghilangkan sidebar blog, namun perlu Anda ingat kembali bahwa tidak semua blog bisa menggunakan cara ini karena kode di masing-masing template yang Anda gunakan mungkin bisa saja berbeda.

Jadi Anda perlu mengetahui sendiri kode ID atau Class yang digunakan pada template blog Anda dengan menggunakan metode Inspect Element agar lebih mudah.

Disini saya hanya mencontohkan apabila blog Anda menggunakan tag ID #sidebar dan #sidebar-wrapper dan juga tag Class .sidebar dan .sidebar-wrapper jadi pastikan kode ini sama dengan blog Anda.

Cara Agar Halaman Menjadi Full Width

Mungkin Anda ingin semua halaman atau beberapa halaman tertentu memiliki lebar penuh atau full width misalnya halaman homepage, halaman statis, dan halaman postingan.

Untuk mengubahnya menjadi full width, Anda hanya perlu menambahkan kode CSS berikut:

#main-wrapper{width:100%}

Contohnya saya ingin halaman homepage menjadi full width maka kode yang digunakan seperti ini:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style>
#sidebar, #sidebar-wrapper, .sidebar, .sidebar-wrapper{display:none}
#main-wrapper{width:100%}
</style>
</b:if>

Jika ingin mengubah seluruh halaman menjadi full width maka kode yang digunakan seperti ini:

<style>
#sidebar, #sidebar-wrapper, .sidebar, .sidebar-wrapper{display:none}
#main-wrapper{width:100%}
</style>

Nah, itulah beberapa cara untuk menghilangkan atau menghapus sidebar di blog Anda dan juga mengubah halaman tersebut menjadi full width atau memiliki lebar yang penuh.
Sumber caramanual

Silahkan Anda coba terapkan di blog Anda sendiri, jika mengalami masalah jangan ragu untuk menghubungi kami melalui halaman kotak atau melalu fan page facebook kami, dengan senang hati kami akan membantu Anda.

Share this post