Mengubah Lebar Kolom Postingan dan Menghilangkan Widget Sidebar

Sebenarnya tips trick blogger berikut ini sudah banyak ditemukan diberbagai tutorial. namun tidak salah kalau saya kembali merilis ulang tentang mengubah lebar kolom postingan blog dan menghilangkan widget sidebar blog. Sebagai contoh dapat dilhat pada blog pertama watonoe.

Di sana terlihat, pada halaman awal blog (home) di sisi kiri adalah kolom posting dan disamping kanannya terdapat dua kolom sidebar. Ketika pengunjung mengklik salah satu judul artikel blog, maka secara otomatis, salah satu sidebar blog tidak tampil, kemudian sidebar blog berubah posisi ke arah kiri dan kolom postingan bertambah lebar serta beralih posisi ke sebelah kanan.

Berikut adalah cara kerjanya :

blog terdiri dari

• main-wrapper (kolom posting) posisi awal sebelah kiri. ukuran awal width 210px
• sidebar-wrapper (kolom sidebar 1) posisi awal di tengah ukuran awal width 230px
• sidebarbaru-wrapper (kolom sidebar 2) posisi awal sebelah kanan. ukuran awal width 230px 

Selanjutnya, menghilangkan sidebarbaru-wrapper ketika artikel akan dibaca

langkah :

Masuk ke editor HTML Template, cari kode ]]></b:skin> kemudian letakkan kode berikut ini sesudah kode ]]></b:skin>

<style type='text/css'>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

#sidebarbaru-wrapper{display:none}

</b:if>

</style>

script diatas artinya, sisi sidebarbaru-wrapper hanya tampil dihalaman depan saja. jika tidak ingin menampilkan dihalaman depan, ubah yang berwarna merah menjadi " != " atau seperti ini :

<style type='text/css'>

<b:if cond='data:blog.pageType != &quot;item&quot;'>

#sidebarbaru-wrapper{display:none}

</b:if>

</style>

kemudian copy kode berikut dan letakkan sesudah kode ]]></b:skin>

<b:if cond='data:blog.pageType == &quot;item&quot;'><style>

</style>

</b:if>

kemudian masukkan script main-wrapper dan sidebar-wrapper disela <style> Posisi Script </style>

misalnya :

script code main-wrapper dan sidebar awal seperti ini :

#main-wrapper {margin-$startSide: 20px;width: 210px;float:$startSide;background-color: none;}

#sidebar-wrapper {margin-$endSide: 10px;width: 230px;float: $endSide;}

kemudian script tersebut anda copy dan tempatkan di sela kode diatas, hasilnya sepert ini :

<b:if cond='data:blog.pageType == &quot;item&quot;'><style>

#main-wrapper {margin-$startSide: 20px;width: 450px;float:right;background-color: none;}

#sidebar-wrapper {margin-$endSide: 10px;width: 230px;float:left;}

</style>

</b:if>

lihat warna merah diatas, terjadi perubahan ukuran dan posisi. dimana awal posisi kolom posting disebelah kiri, kemudian dipindahkan ke kanan dan kolom sidebar yang awalnya berada di posisi tengah atau sebelah kanan kolom posting, diubah kearah kiri.

Simpan template dan lihat hasilnya.

Perlu diingat, perubahan lebar kolom yang ada tergantung luas content blog anda.