Menghilangkan Sidebar Blog di Halaman Tertentu

Baca Juga

Cara Menyembunyikan atau Menghilangkan Widget Sidebar di Halaman Statis Tertentu.

UNTUK memaksimalkan ruang, kita bisa menyembunyikan atau menghilangkan Widget Sidebar Blog di Halaman Statis atau di halaman posting tertentu. Lihat DEMO.

Dengan Menghilangkan Sidebar, Halaman Statis atau Posting akan full dan bisa diisi seperti galery foto atau Random Post dengan Thumbnail seperti dalam demo.

Tips desain blog untuk halaman tertentu ini mungkin berguna bagi blog toko online untuk menyimpan galeri produk. Blog pribadi juga bisa membuat halaman khusus menampilkan galeri foto atau gambar.

Cara Menghilangkan Sidebar Blog di Halaman Tertentu

1. Halaman Tertentu
Untuk menghilangkan Sidebar di Halaman Tertentu, copas atau simpan kode berikut ini di bawah kode </b:skin>

<b:if cond='data:blog.url == "http://namabloganda.blogspot.com/p/nama-halaman.html"'>
<style>
.main-inner .columns {padding-left: 0px !important;padding-right: 0px !important;}
.main-inner .fauxcolumn-center-outer {left: 0px !important;right: 0px !important;}
.main-inner .fauxcolumn-left-outer, .main-inner .fauxcolumn-right-outer, .main-inner .column-left-outer, .main-inner .column-right-outer {display: none !important;}
</style>
</b:if>

2. Semua Halaman Statis
Untuk menghilangkan Sidebar di Seluruh Halaman Statis, copas atau simpan kode berikut ini di bawah kode </b:skin>

<b:if cond='data:blog.pageType == "static_page"'>
<style>
.main-inner .columns {padding-left: 0px !important;padding-right: 0px !important;}
.main-inner .fauxcolumn-center-outer {left: 0px !important;right: 0px !important;}
.main-inner .fauxcolumn-left-outer, .main-inner .fauxcolumn-right-outer, .main-inner .column-left-outer, .main-inner .column-right-outer {display: none !important;}
</style>
</b:if>

3. Semua Halaman Statis & Halaman Posting
Untuk menghilangkan Sidebar Seluruh Halaman Statis dan Halaman Posting, copas atau simpan kode berikut ini di bawah kode </b:skin>

<b:if cond='data:blog.pageType == "item"'>
<style>
.main-inner .columns {padding-left: 0px !important;padding-right: 0px !important;}
.main-inner .fauxcolumn-center-outer {left: 0px !important;right: 0px !important;}
.main-inner .fauxcolumn-left-outer, .main-inner .fauxcolumn-right-outer, .main-inner .column-left-outer, .main-inner .column-right-outer {display: none !important;}
</style>
</b:if>

Sumber

Cara CB: Modifikasi Kode & Trik

Demo halaman penuh yang CB buat menggunakan trik lebih simple dan cepat, yaitu dengan menyimpan kode di Mode HTML di bagian paling atas atau paling bawah halaman tertentu/posting tertentu yang akan dijadikan full page tanpa sidebar:

Kode yang Digunakan untuk Demo:

<style>
.sidebar-wrapper, .sidebar1-wrapper {display: none !important}
.main-wrapper {width: 98%}
</style>

Kode lain yang bisa digunakan:

<style>
.sidebar {display: none !important}
</style>

atau

<style>
#sidebar-wrapper {display: none !important}
</style>

Nama elemen sidebar tiap template hampir sama, yaitu sidebar-wrapper, namun kode awalnya kadang ada yang tikik (.) ada pula yang pagar (#). Karena itu, lihat dulu kode sidebar blog Anda lalu sesuaikan dengan kode Menghilangkan Sidebar Blog di Halaman Tertentu di atas. Good Luck! (http://contohblognih.blogspot.com).*