Buat blog menjadi 3 kolom dengan kolom postingan ditengah

Trik membuat blog menjadi 3 kolom dengan kolom postingan ditengah...


Pertama, sedikit Ayas jelasin tentang layout blog secara umum (standart), sekilas bisa dilihat seperti gambar dibawah ini, beserta penjelasannya :

• Yang berwarna putih adalah 'Body'
• Berwarna kuning, disebut dengan 'outer-wrapper'
• Warna biru adalah 'Header'
• Warna merah adalah 'Main-wrapper', tempat postingan kita berada.
• Warna hijau adalah 'Sidebar'
• Terakhir, warna hitam adalah footer

Mari mulai mengedit. Silahkan menuju halaman 'Tata Letak' - 'Edit HTML'.

Yang pertama harus kita lakukan adalah mendownload template Sodara, agar jika terjadi kesalahan masih bisa di kembalikan seperti semula. Cara untuk mendownload/backup template bisa Sodara baca disini.

Sebelum kita membuat blog kita menjadi 3 kolom, kita harus tau dulu berapa lebar keseluruhan Outer-wrapper, karena outer-wrapper adalah tempat dimana main-wrapper (kolom postingan) dan sidebar berada.

Untuk mengetahui berapa lebar outer-wrapper, cari kode berikut (biasanya seperti ini) :

#outer-wrapper

Dibawahnya ada detail tentang outer-wrapper itu, misalkan :

#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

Nah, width adalah lebar keseluruhan outer-wrapper. Width outer-wrapper inilah yang akan kita jadikan dasar untuk menentukan ukuran masing 2 sidebar dan kolom postingan.

Jika terlalu kecil, silahkan ubah width nya, misalkan kita ganti dengan 900px.

Jangan lupa juga untuk menyesuaikan lebar header dan footer agar sama, ganti dengan 900px juga.

Selanjutnya, karena kita akan membuat 3 kolom - kolom posting dan 2 kolom sidebar - maka kita bagi 900px untuk 3 kolom tersebut.

Misalkan, kita coba bagi 450px untuk kolom posting, 200px untuk masing-masing 2 kolom sidebar kita. Sisanya, 50px kita sediakan untuk jarak antar kolom.

Langkah selanjutnya adalah mengganti lebar masing2 kolom.

1. Kolom Posting

Cari kode :

#main-wrapper {
width: 410px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Ganti widthnya dengan 450px.

2. Kolom sidebar
Cari kode :

#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Ganti width dengan 200px

Nah, sekarang waktunya untuk menambah 1 element untuk sidebar baru kita.

Caranya, tinggal copy kode berikut, lalu paste di atas kode #main-wrapper :

#sidebar2-wrapper {
width: 200px;
float: left;
margin-right:10px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Pemberian angka '2' untuk membedakan dengan sidebar yang sudah ada.

Selanjutnya, copy kode berikut :

<div id='sidebar2-wrapper'>

<b:section class='sidebar' id='sidebar2' preferred='yes'>
</b:section>

</div>

Kemudian paste di ATAS kode :

<div id='main-wrapper'>

Coba save, lalu pindah ke halaman 'Tata Letak' / 'Layout' - 'Element Halaman' / 'Page Element'.

Sekarang Sodara bisa lihat, sudah ada 1 element halaman baru tercipta. Coba isi element halaman baru tersebut dengan text ato logo (klik aja 'Add Gadget' / 'Tambah Gadget'), misalnya. Kemudian save, lalu preview.

Nah, bisa kita lihat hasilnya.

Sudah jadikan blog 3 kolom dengan kolom postingan berada ditengah, diantara 2 sidebar?