Cara Mengubah Lebar Kolom Template

 

Ketika Anda sedang mencari template, Ada banyak template yang Anda sukai tapi satu hal yang membuat Anda tidak memilihnya yaitu lebar template yang tidak sesuai dengan keinginan Anda. Oleh karena itu, semoga tutorial ini bermanfaat sekali untuk Anda semua.

Letak kode2 yang mengatur lebar kolom template Anda:

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

Seperti yang terlihat pada kode-kode diatas, yang mempengaruhi lebar kolom adalah yang saya cetak merah. Width tentu saja dalam bahasa indonesia adalah lebar, jadi gampangkan untuk mengenalinya. 900px adalah nilai lebar yaitu sebesar 900 pixel.

Uraiaanya sebagai berikut :

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

Ini artinya header-wrapper mempunyai lebar sebesar 900px dan mempunyai border (saya artikan border adalah bingkai atau garis tepi) sebesar 1 pixel dengan garis yang solid (solid = garis penuh. dashed = garis putus-putus, dotted = garis berupa titik-titik) dengan warna border yang bisa di ubah-ubah (pada bagian font dan warna).

Header-wrapper hanya penamaan saja (tidak mutlak). Jika diganti dengan nama kepala juga tidak apa-apa. width:900px; berarti lebarnya sebesar 900 pixel. Nah, nilai 900 pixel inilah yang bisa di ubah sesuai keinginan Anda, mau ditambah nilainya biar lebih lebar, atau di kurangi biar lebih kecil. Akan tetapi saran saya, nilai dari header ini harus sama dengan nilai dari lebar body agar terlihat bagus. border:1px solid $bordercolor; adalah agar bagian header mempunyai garis tepi sebesar 1 pixel, jika ingin lebih tebal Anda tinggal tambahin nilainya, atau jika Anda menginginkan garis tepi ini tidak ada maka dihapus saja kode ini.

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

Ini artinya outer-wrapper mempunyai lebar sebesar 900px, jarak sela sebesar 10 pixel dengan align nya adalah rata kiri-kanan dan jenis huruf yang bisa di ubah-ubah melalui panel huruf dan warna.

Outer wrapper hanyalah nama saja. width:900px; berarti lebarnya 900 pixel. 900 pixel ini adalah lebar yang di sediakan untuk kolom-kolom yang ada, sebut saja dalam hal ini kolom main-wrapper, sidebar-wrapper, dan newsidebar-wrapper. Jadi dengan kata lain outer wraper adalah hasil penjumlahan lebar kolom main-wrapper, sidebar-wrapper, dan newsidebar-wrapper. Apabila Anda memasukkan konten yang melebihi lebar kolom masing-masing, maka secara otomatis pula melebihi spek dari lebar yang di sediakan oleh outer wraper dan yang terjadi adalah salah satu kolom akan melorot ke bawah dan ini membuat blog Anda menjadi kurang sedap untuk dipandang mata. Jadi apabila Anda ingin mengubah lebar salah satu kolom diantara yang tiga, maka lebar dari outer wraper pun harus diubah dan disesuaikan.

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

Ini artinya kolom main-wrapper mempunyai lebar sebesar 435 pixel dengan margin kanan sebesar 20 pixel, margin kiri 20 pixel dan kolom ini di letakan sebelah kiri.

main-wrapper adalah kolom halaman posting, apa-apa yang Anda posting maka akan masuk ke halaman ini. width: 435px; berarti lebar kolom ini sebesar 435 pixel, tapi karena menggunakan margin-left dan margin-right, maka lebar kolom sebenarnya adalah sebesar 475 pixel. Akan tetapi yang 40 pixel hanyalah jeda saja agar batas kolom menjadi terlihat tidak bersentuhan. Apabila Anda merasa kolom ini terlalu sempit atau kekecilan, maka Anda bisa menambahkan nilai, contoh 550 pixel. Apabila Anda berniat merubah kolom ini, kolom outer-wraper pun harus ditambah nilainya. contoh tadi apabila main-wrapper ingin menjadi 550 pixel, maka 550px-475px=75px. ini berarti kolom outer-wraper harus ditambah sebesar 75px, jadi 900px+75px=975px.

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

Ini artinya kolom sidebar-wrapper mempunyai lebar sebesar 220 pixel dan ditempatkan sebelah kanan layar.

Kolom sidebar-wrapper adalah kolom sidebar atau kolom tempat dimana Anda menyimpan berbagai aksesoris atau yang lainnya. width: 220px; berarti mempunyai lebar sebesar 220 pixel, apabila ingin dipersempit atau diperlebar, maka Anda hanya perlu mengubah nilai pixelnya saja. Cuma apabila merubah nilai kolom ini, jangan lupa untuk mengubah nilai space yang disediakan oleh outer-wraper. contoh : apabila kolom ini ingin diperbesar menjadi 250pixel maka tambahan pixel adalah sebesar 30 pixel. Nah, 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 ditempatkan pada layar sebelah kiri.

Seperti halnya sidebar-wrapper, kolom newsidebar-wrapper pun adalah tempat menyimpan berbagai aksesori ataupun blog tool. Kolom ini dibuat agar Anda bisa lebih banyak memuat berbagai aksesoris yang Anda inginkan. Kolom newsidebar-wrapper ini lebarnya sebesar 200px, apabila berniat merubahnya maka tinggal merubah nilai pixelnya saja, tapi jangan lupa untuk menambahkan pula pada kolom outer-wraper.


Coba bandingkan antara dua blog ini, silahkan klik di sini  dengan yang di sini.

Share on Google Plus

About Admin

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.