Mengubah Saiz Lebar Colom

Cerita pasal template ni.. Ada yang tanya macam mana nak ubah saiz colom yang ada dalam template kita? Untuk kali ini Ana akan cuba bagi tips yang mudah tapi pening. Sekaligus dapat menambah kefahaman kita berkenaan kod CSS. Walaupun Ana sendiri xtau ape tu CSS. Untuk pengetahuan, sebenarnya mana2 template yang kita download dan gunakannya boleh diubah saiz dan bentuknya, warna juga gayanya. Makna kata boleh ubah dari sebuah pondok usang menjadi banglow mewah!

Ok kekadang ade template cantik yang kita guna tapi saiz colom tidak memuaskan hati kita. Untuk itu, lihat caranya. Ini kod bagi colom di blog yang tersedia pada template Minima.

#header-wrapper {
width:900px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
#outer-wrapper {
width: 900px;
margin:0 auto;
padding:10px;
text-align:justify;
font: $bodyfont;
}
#main-wrapper {
width: 435px;
margin-left: 20px;
margin-right: 20px;
float: left;
}
#sidebar-wrapper {
width: 220px;
float: right;
}
#newsidebar-wrapper {
width: 200px;
float: left;
}
#footer-wrapper {
width: 900px;
margin:0 auto;
padding:10px;
text-align:justify;
font: $bodyfont;
}

Kod2 merah adalah lebar setiap colom tersebut. Ana terangkan lebih lanjut. Bersedia untuk pening..

1. Pertama, kod header dan outer ini.

#header-wrapper {
width:900px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

#outer-wrapper {
width: 900px;
margin:0 auto;
padding:10px;
font: $bodyfont;
}

Ok sekarang size header kita adalah 900px. Juga saiz outer. Outer ni kita xnampak sebenarnya. Die ni kotak yang merangkumi main wrapper dan sidebar. Jika kita ingin mengubah lebar header, outer juga wajib diubah. Biasanya saiz kedua ni mesti sama.

2. Seterusnya pada bahagian Main Wrapper dan Sidebar. Ana gabungkan keduanya untuk mudah difahami.

#main-wrapper {
width: 435px;
margin-left: 20px;
margin-right: 20px;
float: left;
}
#sidebar-wrapper {
width: 220px;
float: right;
}
#newsidebar-wrapper {
width: 200px;
float: left;
}

Main wrapper ni adalah kotak untuk posting kita. Dengan saiz 435. Sidebar adalah kotak samada dikiri atau kanan. Jika kita mahu mengubah saiz sidebar, maka saiz main wrap juga mesti diubah.

Contoh: Dengan lebar header dan outer 900px. kita ingin membesarkan colom main/posting dengan 520px. Maka kita mesti mengecilkan saiz sidebar sedia ada kepada 150px atau bla bla.. Begitu juga sebaliknya. Jika sidebar dibesarkan, maka saiz main/post mesti ditambah nilainya. Penatnye nak wat teori ni..

Begitula pada mana2 bahagian pun. Harap xpening lagi.

Tambahan: kod margin. Adalah kod untuk jarak satu colom dengan yg lain. Boleh diubah begini.

margin:10px; (jarak kiri kanan atas bawah adalah 10px)
margin-left:5px; (jarak kiri saja 5px)
margin-right:5px; (jarak kanan saja 5px)
margin-top:5px; (jarak atas saja 5px)
margin-bottom:5px; (jarak bawah saja 5px)

Sekian unutuk kali ini.. Selamat Mencuba..