June 18, 2015

Menghilangkan Sidebar Blog di Halaman Tertentu

June 18, 2015

desain halaman blog
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).*

Previous
« Prev Post
Author Image

CB Blogger

Recommended Posts

Related Posts

Show comments
Hide comments

5 comments on Menghilangkan Sidebar Blog di Halaman Tertentu

  1. Mantap mas, sangat membantu

    ReplyDelete
  2. Mas kalo menampilkan sidebar di halaman statis nya bagaimana ?
    tolong mas :)

    ReplyDelete
  3. Kalo cuma ilangin sidebar left gimana caranya bro

    ReplyDelete
    Replies
    1. gunakan kode terakhir, sesuaikan nama elemen sidebar-left nya

      Delete
  4. om mau tanya. kalau script no 1 biar bisa bekerja di web yang di buka di hp bagaimana ya, kalau dibuka di desktop udah bisa tp kalau dibuka di hp/smartphone masih belom bisa. mohon pencerahannya

    ReplyDelete

Contact Form

Name

Email *

Message *