Mengubah lebar coloum

tahukah u all bahawa coloum di template u all tu boleh diubah menjadi lebih luas???So hari ini su nak ajar u all bagaimana caranya.Kod-kod untuk mengubah coloum adalah

#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;
}


Width membawa maksud lebar, jadi disinilah yang boleh kita ubah. 900px adalah nilai lebar iaitu sebesar 900 pixel.



Contohnya:

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

Ini bermaksud header-wrapper mempunyai lebar sebesar 900px dan mempunyai border sebesar 1 pixel dengan garis yang solid (solid = garis penuh. dashed = garis putus-putus. dotted = garis berupa titik-titik) dengan warna border yang boleh di ubah-ubah (pada bagian font dan warna).

Nilai 900 pixel inilah yang boleh di ubah sesuai dengan keinginan, mahu ditambah nilainya biar lebih lebar, atau di kurangi biar lebih kecil.

border:1px solid $bordercolor;bermaksud header mempunyai garis tepi sebesar 1 pixel, jika ingin lebih tebal ,tambahkan sahaja nilainya, atau jika tidak mahu garis tepi ini,u all delete sahaja kod tersebut menjadi:-



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

Ini bermaksud outer-wrapper mempunyai lebar sebesar 900px, jarak sela sebesar 10 pixel dengan alignmentnya adalah sama rata kiri-kanan dan jenis huruf yang boleh diubah-ubah melalui panel huruf dan warna.

width:900px; bermaksud lebarnya 900 pixel. 900 pixel ini adalah lebar yang di sediakan untuk coloum-coloum yang ada, Dalam hal ini coloum main-wrapper, sidebar-wrapper, dan newsidebar-wrapper. Outer wraper adalah hasil penjumlahan lebar coloum main-wrapper, sidebar-wrapper, dan newsidebar-wrapper. Apabila u all memasukkan content yang melebihi lebar coloum masing-masing, maka secara automatik pula melebihi spek dari lebar yang di sediakan oleh outer wraper dimana kesannya ,salah satu coloum akan melorot ke bawah dan ini membuat blog u all menjadi tidak cantik . Jadi apabila u all ingin mengubah lebar salah satu coloum di antara yang tiga, maka lebar dari outer wraper pun harus di ubah dan di sesuaikan.



#main-wrapper {
width: 435px;
margin-left: 20px;
margin-right: 20px;
float: left;

}

Ini bereri coloumn main-wrapper mempunyai lebar sebesar 435 pixel dengan margin kanan sebesar 20 pixel, margin kiri 20 pixel dan coloum ini di letakkan sebelah kiri.

main-wrapper adalah coloumn untuk posting, apa-apa yang kita posting maka akan masuk ke halaman ini. width: 435px; bererti lebar coloumn ini sebesar 435 pixel, tapi kerana menggunakan margin-left dan margin-right, maka lebar coloumn sebenarnya adalah sebesar 475 pixel. Akan tetapi yang 40 pixel hanyalah margin saja agar ruang coloumn menjadi tidak bersentuhan. Apabila u all merasa coloumn ini terlalu sempit atau kecilan, maka u all boleh menambahkan nilai, contoh 550 pixel. Apabila u all berniat mengubah coloumn ini, coloumn outer-wraper pun harus di tambah nilainya. contoh tadi apabila main-wrapper ingin menjadi 550 pixel, maka 550px-475px=75px. ini bererti coloumn outer-wraper harus di tambah sebesar 75px, jadi 900px+75px=975px.



#sidebar-wrapper {
width: 220px;
float: right;
}

Ini bermaksud coloumn sidebar-wrapper mempunyai lebar sebesar 220 pixel dan di tempatkan disebelah kanan

Coloumn sidebar-wrapper adalah coloumn sidebar atau coloumn tempat di mana kita menyimpan berbagai aksesori atau yg lainnya. width: 220px; bererti mempunyai lebar sebesar 220 pixel, apabila ingin di kecilkan atau di perlebar, maka kita hanya perlu mengubah nilai pixelnya saja. Cuma apabila merubah nilai coloumn ini, jangan lupa untuk mengubah nilai space yang di sediakan oleh outer-wraper. contoh : apabila coloumn ini ingin diperbesar menjadi 250pixel maka tambahan pixel adalah sebesar 30 pixel, so jangan lupa untuk menambahkan pula pada kolom outer-wraper.


#newsidebar-wrapper {
width: 200px;
float: left;
}


Ini artinya kolom newsidebar-wrapper mempunyai lebar kolom sebesar 200 pixel dan di tempatkan pada layar sebelah kiri.

Seperti di sidebar-wrapper, coloumn newsidebar-wrapper juga adalah tempat menyimpan berbagai aksesori ataupun blog tool. coloumn ini di buat agar kita boleh memuatkan berbagai aksesori yang kita inginkan. Coloumn newsidebar-wrapper ini lebarnya sebesar 200px, so bila berniat mengubahnya maka perlu ubah nilai pixelnya saja, tapi jangan lupa untuk menambahkan pula pada coloumn outer-wraper.


Coba bandingkan antara dua blog ini, silahkan klik di CONTOH YANG COLOUMNYA DIUBAH LUAS ! dengan yang CONTOH YANG TIDAK DIUBAH COLOUMNYA!

Luangkanlah sedikit masa korang untuk memberi komen di blog ini kerana setiap komen yang dibuat oleh korang amat bermakna dan secara tidak langsung ianya memberi suntikan semangat untuk saya terus menulis di blog ini...