Apapun yang terjadi kepada Anda, akan tetap menjadi sesuatu yang menguatkan Anda, bila Anda tidak mengijinkannya untuk melemahkan Anda.Maka mulailah dari tempat di mana Anda berada, dan mulailah sekarang. Anda sampai, hanya karena Anda berangkat.Dan ingatlah, bahwa Batas waktu itu dibuat bukan karena Anda harus selesai, tetapi karena Anda harus segera memulai. Dan setelah pengertian ini mendapatkan tempat yang kuat di hati Anda, perjelaslah bagi diri Anda sendiri, bahwa Keberhasilan Anda ada pada tempat yang lebih tinggi dari yang sedang Anda kerjakan sekarang. Kemudian, janganlah berlaku seperti orang yang mengeluhkan apa saja yang tidak terlihat di dalam sebuah gambar, Berfokuslah pada yang telah jelas terlihat, karena dari sana lah Anda mencapai tempat-tempat yang belum terlihat bahkan oleh imajinasi Anda. Lalu bekerja keraslah dalam kedamaian bahwa Anda telah melakukan yang benar. Janganlah berupaya menjelaskan mengapa Anda tidak mencapai yang belum Anda capai. Bekerjalah untuk mencapai yang telah jelas bagi Anda. Maka, Mulailah keberhasilan Anda dari mana pun Anda berada.(Mario Teguh)

30 Mar 2009

MENGENAL KODE-KODE UNTUK MENGATUR LEBAR KOLOM

Kelebaran (width) kolom, baik kelebaran mainbar (kolom tempat posting) maupun sidebar (kolom kanan tau kiri) sangat mempengaruhi tampilan blog kita, semakin lebar masing2 kolom, semkin terlihat leluasa (meskipun realtif). Setelah saya berselancar di blog2ya para blogger senior, pada kesempatan ini saya ingin share bagaimana kita mengenali kode-kode HTML yg berkaitan dengan width kolom, kode2 ini dapat kita dapatkan dengan terlebih dahulu masuk ke yang ada dalam kolom "Edit HTML"
Dimanakah letak kode-kode untuk mengatur lebar kolom ? Berikut keterangannya:

#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 tercetak merah. Width dalam bahasa indonesia adalah lebar. 900px adalah nilai lebar yaitu sebesar 900 pixel.

Berikut uraiainnya:
#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).

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 tambah nilainya, atau jika temen2 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 alignnya adalah rata kiri-kanan dan jenis huruf yang bisa di ubah-ubah melalui panel huruf dan warna.

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 temen2 merasa kolom ini terlalu sempit atau kekecilan, maka temen2 bisa menambahkan nilai, contoh 550 pixel. Apabila temen2 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.

Sumber : Kang Rohman diedit tanpa mengurangi substansi. Thanks Kang Rohman!

3 komentar:

  1. Good idea, i'll try what you got, Thank You....!

    BalasHapus
  2. HohohohohoIt's working...! Hatur Thank U Kang...! Siiip Lah...!

    BalasHapus
  3. setelah muter-muter akhirnya ketemu ma blog yang unik....heheheh...sungguh seneng lihatnya mas.pengen rasanya memiliki blog seperti ini..thank atas ilmunya..lumayan buat otak atik blog saya..

    mas saya mau bikin table seperti punya kang Jured "ZONA ISLAM/PENDIDIKAN" lebih jelasnya table yang apa bila mouse diarahkan ke table maka akan muncul sederetan table-table di dalamnya...gimana caranya buatnya yah?....biar table di blog saya bisa punya table yang banyak table-table tersembunyi di dalamnya....?

    ditunggu comentnya...kirim aja ke alamat ini artikelnya..tan_zil86@yahoo.com

    makasih banyak Kang Jured...

    BalasHapus

SOBAT KANG JURED