Keindahan dan kenyaman ngeblog kadang dipengaruhi oleh lebar kolomnya! Kadang kurang sreg kalo posting artikel, ternyata tampilannya begitu sempit… sampai beberapa meter panjangnya! Sedikit tip yang dapat dilakukan untuk mengotak-atik lebar kolom. Moga-moga berguna!
Contoh letak kode-kode untuk mengatur lebar kolom:
#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;
}
Langsung kita dapat menebak Width (lebar) klo 900px adalah ukuran lebarnya yaitu sebesar 900 pixel.
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;
}
Langsung kita dapat menebak Width (lebar) klo 900px adalah ukuran lebarnya yaitu sebesar 900 pixel.
Agar lebih faham, kode-kode diatas saya uraikan :
header-wrapper : biasanya sebagai kolom judul blog / kepala pada blog.
outer wrapper : adalah lebar keseluruhan yang di sediakan untuk kolom-kolom yang ada, didalamnya
da kolom main-wrapper, dan sidebar-wrapper.
main-wrapper : adalah kolom halaman posting, apa-apa yang kita posting maka akan masuk ke halaman ini.
sidebar-wrapper :adalah kolom sidebar atau kolom tempat di mana kita menyimpan berbagai aksesoris atau yg lainnya
width : ukuran lebar
xxxxpx : nilai lebar dalam pixel, contoh ( 900px berarti mempunyai lebar sebesar 900px)
border : adalah bingkai atau garis tepi (solid = garis penuh, dashed = garis putus-putus, dotted = garis berupa titik-titik)
$bordercolor; : Warna untuk border , contoh ( ffffff = putih, 000000 = hitam )