Membuat Halaman Full Post (Penuh) Tanpa Sidebar

Sebelumnya saya mau mengucapkan terimakasih dulu untuk beberapa sahabat blogger saya karena sudah mempercayakan kepada saya untuk request beberapa tutorial seputar blogging, jika kemaren dari sahabat Ndolem maka kali ini saya ingin menjawab request dari sahabat Mas Ferdinand (http://dj-site.blogspot.com/).

Beberapa tutorial mungkin belum saya postingkan, bukan karena pilih kasih tetapi ilmu pengetahuan saya juga baru akan berkembang, jadi tutorial yang saya kuasai dulu dan yang sudah saya praktekkan yang akan saya postingkan untuk teman-teman semua.

Ok, kali ini saya ingin share tentang bagaimana cara Membuat Halaman Full Post (Penuh) Tanpa Sidebar, sesuai dengan request mas Ferdinand.

Halaman Full Post (Penuh) Tanpa Sidebar sebenarnya dibuat untuk beberapa alasan, salah satunya adalah untuk menambahkan Embed Forum (cth: Aplikasi Forum Submit Artikel - Nabble), di mana di dalam blog harus memiliki tempat yang sedikit luas agar ruang forum terlihat PAS, tidak kecil. (bisa juga untuk yang lainnya).

Kelebihan: Trik ini hanya untuk halaman tertentu saja, jadi bukan secara keseluruhan halaman, jadi kita bisa memilih sendiri posting yang mana yang harus dibuat dalam 1 halaman penuh tanpa sidebar.

Kekurangan: Teman-teman harus sedikit extra kerja keras, tentunya TELITI agar trik ini bisa berjalan dengan baik di blog teman-teman :D

Buat teman-teman yang ingin mencoba Membuat Halaman Full Post (Penuh) Tanpa Sidebar, silahkan ikuti langkah-langkah di bawah ini:

Sebelum melangkah, kita harus mengetahui dulu 2 kode penting dalam trik ini:

Kode Sidebar:

a. Jika hanya 1 sidebar: #sidebar{ atau #sidebar-wrapper {

b. Jika lebih dari 1 sidebar: #sidebar-wrapper, #mid-sidebarleft, #mid-sidebarright, #sidebar-bottom { atau #sidebar-leftwrap { , #sidebarright {

Kode Area Posting (Post): #main-wrapper {

Ok, masing-masing dari kode Sidebar dan Area Posting di atas memiliki lebar (width) yang berbeda, lihat ilustrasi di bawah ini:

Cari tahu dulu berapa lebar header blog masing-masing, saya contohkan milik saya adalah 900px, lalu lebar area posting (#main-wrapper {) adalah 580px dan sidebar (#sidebar-wrapper) adalah 260px.

Total lebar antara Sidebar dan Area Posting adalah 840px, sisanya adalah 60px itu untuk batas margin/border. Nah lebar dari total itulah yang akan kita gunakan sebagai halaman full post yaitu 840px (selanjutnya kita sebut #main-wrapper {).

1. Login ke akun blogspot,
2. Klik Design/Rancangan >> Edit HTML >> Klik Expand Templates Widget,
3. Cari kode berikut: </head>

4. Tambahkan kode di bawah ini dan taruh di atas kode tadi:

kode untuk blog 1 sidebar:

<b:if cond='data:blog.url == &quot;http://demotutorialanggasona.blogspot.com/2010/09/blog-demo-anggasona-test-post-1.html&quot;'>
<style>
#sidebar-wrapper {
display: none !important;
}
#main-wrapper{
width: 840px;
}
</style>
</b:if>

kode untuk blog 2 sidebar atau lebih:

<b:if cond='data:blog.url == &quot;http://demotutorialanggasona.blogspot.com/2010/09/blog-demo-anggasona-test-post-1.html&quot;'>
<style>
#sidebar-wrapper, #mid-sidebarleft, #mid-sidebarright, #sidebar-bottom {
display: none !important;
}
#main-wrapper{
width: 840px;
}
</style>
</b:if>

Note: Untuk kode sidebar harap disesuaikan saja, tiap templates terkadang berbeda. Tugas kita adalah menyembunyikan sidebar, apabila ada lebih dari 2 sidebar, maka masukkan id sidebarnya dipisahkan dengan koma, sesuai ket di kode untuk blog 2 sidebar atau lebih di atas.

5. Keterangan:

- Silahkan ubah tulisan yang berwarna biru tua dengan alamat url salah satu halaman/postingan teman-teman yang ingin dibuat full post (penuh tanpa sidebar).

- Perhatikan kode width main wraper (warna hijau), harap diubah sesuai dengan lebar total sidebar dengan area posting blog masing-masing.

6. Jika sudah klik Save Templates dan lihat perubahannya.

lihat DEMO

Seperti itulah teman-teman bagaimana caranya Membuat Halaman Full Post (Penuh) Tanpa Sidebar, semoga saja tutorial ini bisa menjawab request dari Mas Ferdinand, dan buat teman-teman yang lainnya silahkan mencoba. Salam...