Hanya arsip

halaman asli ada di http://kolom-tutorial.blogspot.com

Ubah Lebar Kolom Template

Lagi-lagi soal template nih. Mungkin ada beberapa dari sobat sekalian ada yang merasa sangat menyukai suatu template, akan tetapi ada ganjalan yakni lebar kolom yang ada tidak sesuai keinginan kita, baik itu lebar kolom sidebar atau pun mainbar (kolom tempat posting). Ada kalanya lebar kolom dari suatu template di rasa terlalu lebar ataupun terlalu sempit, nah jika sobat mengalami hal yang demikian, lumayan nih ada tips buat mengakalinya supaya lebar kolom menjadi sesuai dengan keinginan kita sendiri.

Untuk mengetahui lebar kolom suatu template, kita bisa mengenalinya melalui style sheet CSS nya. Akan tetapi tentu saja ada perbedaan antara satu template dengan template yang lainnya, ini tentunya terserah kepada si designer template nya sendiri. Sebagai contoh untuk bagian header, jika menurut standar template blogger di dalam style sheet CSS nya di namakan header, akan tetapi untuk template-template hasil buatan designer lain di luar blogger ada yang menamakan Banner ataupun nama-nama yang lainnya. Sebuah nama tentu tidak akan berpengaruh terhadap hasil yg di dapat, nama ini di pakai hanyalah agar mudah untuk di ingat atau di kenali oleh sang pemakai template apabila ingin melakukan editting template.

Agar tidak terlalu membingungkan, saya ambil contoh template minima 3 kolom yang bisa di download di sini !.Setelah melihat perkembangannya ternyata template ini banyak yang menyukainya. Jika sobat tidak puas dengan lebar kolom pada template tersebut, silahkan deh ikuti tips berikut biar lebar kolomnya sesuai dengan keinginan sobat. Dimanakah letak kode-kode untuk mengatur lebar kolom ? saya berikan contoh :

#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.

Agar lebih faham, kode-kode diatas saya uraikan :

#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 adalah hanya penamaan saja, tidak mutlak. Jika di ganti 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 sobat, 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 sobat tinggal tambahin nilainya, atau jika sobat menginginkan garis tepi ini tidak ada maka sobat hapus 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 sobat memasukan content 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 kita menjadi kurang sedap untuk di pandang mata. Jadi apabila sobat ingin mengubah lebar salah satu kolom 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 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 kita 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 sobat merasa kolom ini terlalu sempit atau kekecilan, maka sobat bisa menambahkan nilai, contoh 550 pixel. Apabila sobat berniat merubah kolom ini, kolom outer-wraper pun harus di tambah nilainya. contoh tadi apabila main-wrapper ingin menjadi 550 pixel, maka 550px-475px=75px. ini berarti kolom outer-wraper harus di tambah sebesar 75px, jadi 900px+75px=975px.

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

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

Kolom sidebar-wrapper adalah kolom sidebar atau kolom tempat di mana kita menyimpan berbagai aksesoris atau yg lainnya. width: 220px; berarti mempunyai lebar sebesar 220 pixel, apabila ingin di persempit atau di perlebar, maka kita hanya
perlu mengubah nilai pixelnya saja. Cuma apabila merubah nilai kolom ini, jangan lupa untuk mengubah nilai space yang di sediakan oleh outer-wraper. contoh : apbila 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 di tempatkan pada layar sebelah kiri.

Seperti halnya sidebar-wrapper, kolom newsidebar-wrapper pun adalah tempat menyimpan berbagai aksesori ataupun blog tool. kolom ini di buat agar kita bisa lebih banyak memuat berbagai aksesori yang kita inginkan. Kolom newsidebar-wrapper ini lebarnya sebesar 200px, nah bila 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 !

Selamat berbingung ria !

25 Juli 2007 - Posted by | blog tutorial, modifikasi blog

17 Komentar »

  1. Tutorialnya bagus banget. Saya semakin mudeng dg template blogger saya. Terima kasih.

    Komentar oleh Anonymous | 17 Agustus 2007 | Balas

  2. mas..klo mo perlebar area posting gmn ??

    Komentar oleh redblack | 26 Agustus 2007 | Balas

  3. eh itu bwat template classic atau yang new?? kalau yang new apakah bisa diubah juga??

    Komentar oleh rianam..nam..nam.. | 9 Oktober 2007 | Balas

  4. terima kasih suksese selalu

    Komentar oleh Utar | 19 Desember 2007 | Balas

  5. gimana sih cara bisa kayak gini blognya
    maklum kan baru belajar

    Komentar oleh vebry andrian | 30 Desember 2007 | Balas

  6. Top top markotobbbb….

    Jadi ngerti aku

    Komentar oleh Amatiran | 13 Januari 2008 | Balas

  7. kang, kolom kiri ama kolom tengah sudah bisa rata, tapi kolom kanan blom bisa sejajar … gmn dunk ?
    ukurannya aq nyontek disini lho.
    Trus kalo pengen kolom2 itu ada jarak dengan tab nya bgmana caranya ? maksudnya biar ga dempet gitu ?

    Komentar oleh Ria | 19 Januari 2008 | Balas

  8. THX BANYAKKKKKKKKKKK KANG…………………..
    SEMOGA TUHAN YME MEMBALAS KEBAIKAN AKANG

    Komentar oleh Anonymous | 7 Maret 2008 | Balas

  9. thx ilmunya

    Komentar oleh royan | 27 Maret 2008 | Balas

  10. mas saya boleh minta skripnya yg udah jadi kaya yg di http://hackedminima.blogspot.com/2007/07/electronic-shopping.html

    Komentar oleh PENTING GAK PENTING | 24 April 2008 | Balas

  11. Thanx ya mas…
    Tapi saya ubah yang bagian posting kok malah jadi kacau ya?
    Numpang muat link skalian mas… hehehe…
    http://olahvocal.blogspot.com/2008/05/dasar-dasar-dalam-bernyanyi.html

    Komentar oleh Robby | 18 Mei 2008 | Balas

  12. mas sgt berguna bgt tutuorisal anda.
    q mau nanya gimana nambahin gambar di header blog.q coba nambahin tapi malah gambarnya satu halaman

    Komentar oleh FORSIL SMAGE | 4 Juni 2008 | Balas

  13. terima kasih informasinya, kang maaf sok kenal, sekalian memperkenalkan diri. semoga diterima

    Komentar oleh windu | 5 Juli 2008 | Balas

  14. Wah…. Kang, tutorial antum memang masyaallah 😀 Sumpah deh, bermanfaat banget. Jazakallah Khoir. Syukron…

    Komentar oleh the right man | 3 Agustus 2008 | Balas

  15. Salam kenal Kang,Makasih tutorialnya

    Komentar oleh Newbie | 9 Agustus 2008 | Balas

  16. wow.. ok banget tutorial disini. Mksh udh membantu. ^_^

    Komentar oleh vivitar_angel | 9 Agustus 2008 | Balas

  17. si akang, aya-aya wae… Nuhun pisan ah, sedoot
    http://atrox2008.blogspot.com

    Komentar oleh Anonymous | 19 Agustus 2008 | Balas


Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: