Permasalahan Membuat Halaman Penuh Tanpa Sidebar

Sebelumnya saya telah posting tentang bagaimana membuat halaman penuh tanpa sidebar, dan ternyata banyak yang masih gagal membuatnya. Beberapa akhirnya konsultasi langsung dengan saya dan sukses dan tentu masih banyak yang belum bisa membuatnya dan ternyata hanya karena masalah kecil.

#1 Sidebar Id
Permasalah pertama hanyalah pada masalah sidebar ID. Mari kita lihat dulu kode pada tutorial sebelumnya tentang pembuatan halaman penuh tanpa sidebar. Kode berikut diinstruksikan untuk diletakkan di atas </head>

<b:if cond='data:blog.url == &quot;http://urlpostingananda.com/urlpostingananda.html&quot;'>
    <style>
.sidebar {
display: none !important;
}
    #main-wrapper, .post {
width: 640px;
    }
    </style>
    </b:if>

Yang berwarna merah adalah class sidebar. Anda bisa menggantinya manual sesuai dengan model template Anda. Misalkan template Anda terdiri dari satu sidebar saja, maka secara umum sidebar id nya menggunakan sidebar-wrapper, sehingga kodenya:

#sidebar-wrapper {
display: none !important;
}

Beberapa template menggunakan beberapa model sidebar, seperti dua sidebar, atau bahkan ada yang memakai sidebar lebar di atas dan dua sidebar di bawah sidebar utama. Nah, caranya sama saja. Anda hanya perlu mengetahui Id Sidebar Anda (Id diawali pagar : #). Pisahkan antar id dengan koma. Kodenya menjadi seperti berikut ini:

#idsidebar1, #idsidebar2, #idsidebar3, #idsidebar4 {
display: none !important;
}

misalnya saja menjadi:

#sidebar-wrapper, #mid-sidebarleft, #mid-sidebarright, #sidebar-bottom {
display: none !important;
}

Jadi permasalahan utama soal ini Adalah Anda harus bisa menemukan id sidebar yang ingin dihilangkan.

#2 Kebingungan Menghilangkan Widget
Setelah menghilangkan sidebar, tentu semua widget pada sidebar akan ikut hilang. Namun banyak yang kebingungan bagaimana cara menghilangkan widget-widget di bawah postingan seperti tombol like button. Widget HTML yang ditambahkan langsung seperti tombol like facebook (baca: memasang tombol suka/like facebook) tidak mempunyai class selector atau id selector. Seperti disebutkan pada permasalahan 1, kita harus bisa menemukan id sidebar untuk menghilangkannya. Begitupun dengan widget. Lalu bagaimana jika widget tidak mempunyai id atau class? Jawabannya adalah kita beri sendiri.

Tambahkan css kosong misalnya seperti berikut ini di atas ]]></b:skin>

#hilangsaja {border: 0;}

Sekarang pada kode penghilangan sidebar tadi tambahkan id hilangsaja sehingga misal seperti berikut ini:

#sidebar-wrapper, #hilangsaja {
display: none !important;
}

Nah, kode di atas berarti semua widget yang memiliki id hilangsaja maka akan dihilangkan. Terakhir adalah memberikan id hilangsaja pada gadget yang akan dihilangkan. Caranya adalah mengapit kode widget yang akan dihilangkan, sehingga seperti berikut ini:
<div id="hilangsaja">
kode widget yang ingin dihilangkan disini
</div>

#3 Penentuan Halaman Tertentu
Pada postingan menjelaskan penghilangan sidebar pada halaman tertentu. Perhtaikan kode baris pertama:

<b:if cond='data:blog.url == &quot;http://urlpostingananda.com/urlpostingananda.html&quot;'>

Maka Anda diminta untuk mengganti yang berwarna merah dengan alamat postingan Anda yang ingin ditampilkan tanpa sidebar. Jika Anda ingin membuatnya di keseluruhan halaman postingan Anda, maka Anda cukup mengganti kode tersebut dengan
<b:if cond='data:blog.pageType == &quot;item&quot;'>

Untuk berbagai kustomisasi lain, misal kebalikannya dengan membuat pengaturan tanpa sidebar untuk halaman selain posting, untuk homepage saja, untuk static page saja atau sebagainya, baca daftar selected code lengkap di postingan: Penampilan Widget di Halaman Tertentu

Selamat siang dan semoga bermanfaat....