Blog Menjadi 3 Kolom

Setelah kita mencoba membuat footer menjadi 3 kolom, g ada salah dan dosanya kalo kita mencoba membuat blog kita menjadi 3 kolom.

Caranya gampang dan prinsipnya sama dengan cara membuat footer menjadi 3 kolom. Yang perlu kita kuasai dulu adalah konsepnya.

Yuk kita bahas bareng.....iyuuuukkkssss.......

Blog pada umumnya (yang masih aseli), bagian blog terdiri dari 3 bagian. Yaitu :

1- Header
2- Outer
3- Footer
4- Dah, cuma 3 j.

Nah, pada trick kali ini, kita akan ngublek2 pada bagian Outer, dimana disitu terdapat Main dan Sidebar. Main adalah tempat dimana kita biasa mencurahkan buah pikiran kita. Bahasa kerennya adalah 'Tempat Postingan'. oalaaaaaaaah..... Trus, sidebar tu, yang ada disebelah kiri/kanan main. Biasanya tempat shoutbox, label2, link, banner, widget2, de el el, de es be.

Untuk membuat blog kita menjadi 3 kolom, yg kita lakukan adalah menambah sidebar kita.

Pada awalnya, sidebar hanya ada 1, seperti ini :




Sekarang, kita mulai....Jangan lupa untuk mendownload template asli anda.

Pertama, cari kode ini

#outer-wrapper {
position:relative;
top:4px;
$startSide:4px;
background: #999;
width:744px;
margin:10px auto;
text-align:$startSide;
font: $bodyFont;
}

Nilai pada 'width' adalah lebar outer keseluruhan. Karena kita akan menambahkan 1 sidebar, maka kita perlu menambah lebar outer nya. Semisal kita akan menambah sidebar selebar 200px, maka kita harus mengganti lebar outer, 744 + 200 = 944. Ditambah lagi untuk jarak sela, misalnya 10px, maka jadi 954. Langsung kita ganti saja nilai width menjadi 954.

Langkah selanjutnya adalah menambah sidebar baru. Kita cari kode berikut :


#sidebar-wrapper {
background:$sidebarBgColor url("http://www2.blogblog.com/no897/corner_sidebar_$startSide.gif") no-repeat $startSide top;
width:254px;
float:$endSide;
padding:0;
color: $sidebarTextColor;
font-size: 83%;
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 */
}


Ini adalah kode untuk sidebar yang sudah ada. Perlu diketahui, jangan bingung jika banyak kode yang berbeda, karena kode tiap template biasanya memang berbeda.

Setelah menemukan kode sidebar asli, sekarang kita copy kodenya, lalu paste diBAWAH kode sidebar asli. Sehingga, kini akan ada 2 kode sidebar yang sama. Nah, untuk membedakan sidebar baru dengan yang asli, kita perlu merubah beberapa kode. Perhatikan kode berikut :

#sidebar2 {
background:$sidebarBgColor url("http://www2.blogblog.com/no897/corner_sidebar_$startSide.gif") no-repeat $startSide top;
width:200px;
float:$endSide;
padding-left :10;
color: $sidebarTextColor;
font-size: 83%;
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 */
}

Kode berwarna merah adalah kode yang harus diganti. Nilai pada width adalah lebar sidebar baru, kita beri sesuai perhitungan yang sudah kita lakukan. Sehingga, kodenya akan seperti ini:


#sidebar-wrapper {
background:$sidebarBgColor url("http://www2.blogblog.com/no897/corner_sidebar_$startSide.gif") no-repeat $startSide top;
width:254px;
float:$endSide;
padding:0;
color: $sidebarTextColor;
font-size: 83%;
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 */
}

#sidebar2 {
background:$sidebarBgColor url("http://www2.blogblog.com/no897/corner_sidebar_$startSide.gif") no-repeat $startSide top;
width:200px;
float:$endSide;
padding-left :10px;
color: $sidebarTextColor;
font-size: 83%;
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 */
}

Nah, setelah kita membuat kode sidebar baru kita, sekarang waktunya untuk 'melahirkan' sidebar baru ini diblog kita. Caranya, silahkan cari kode berikut :

< id='sidebar-wrapper'>


Kemudian copy kode berikut diATAS kode tadi.

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

Klo dah, simpan template kmu. Lalu lihat pada Elemen Halaman. Ada perubahan??

Nah, kini ada 3 kolom di blog kita? bagaimana agar kolom postingan berada ditengah? Besok2 j y, dah ngantuk neh....c u!!!