27 Jun 2009 
yudiacro 
771 views Banyak sekali tutorial cara membuat layout 3 kolom, namun kebanyakan darinya malah membingungkan kita. Ke-tidakkonsisten-an sering terjadi apabila layout tersebut dibuka di berbagai jenis browser maupun di berbagai resolusi layar. Kalau anda belum menemukan cara yang baik untuk membuat layout 3 kolom, anda bisa menggunakan teknik-teknik di bawah ini.
The Blueprint
Pertama kita harus tahu dan mengerti pondasi dari layout yang akan kita buat. Hal ini menjaga agar tidak ‘tersesat’ di kode-kode kita sendiri dan memudahkan kita untuk debugging nantinya. Berikut ini adalah struktur layout kita dalam XHTML:
<div id="container">
<div id="header"></div>
<div id="sideleft"></div>
<div id="middle"></div>
<div id="sideright"></div>
<div id="footer"></div>
</div>
Dan di bawah ini adalah struktur layout kita dalam CSS:
body { }
#container { }
#header { }
#sideleft { }
#middle { }
#sideright { }
#footer { }
Ok kita sudah punya cetak birunya, sederhana bukan? Strukturnya mudah dipahami begitu kita melihatnya. Selanjutnya kita akan bangun arsitektur layout kita berdasarkan cetak biru diatas.
The Architecture
Buka text editor anda, lalu buatlah file baru. Copy dan paste kode-kode berikut ke dalamnya, lalu save dengan nama layout.html (nama terserah).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>How to Build 3 Column Layout in A Good Way</title>
<link rel="stylesheet" href="layout.css" type="text/css" media="screen" />
</head>
<body>
<div id="container">
<div id="header">
<h2>This is Header</h2>
</div>
<div id="sideleft">
<h3>Title Menu</h3>
<ul>
<li><a href="#" title="Menu">Menu</a></li>
<li><a href="#" title="Menu">Menu</a></li>
<li><a href="#" title="Menu">Menu</a></li>
<li><a href="#" title="Menu">Menu</a></li>
</ul>
</div>
<div id="middle">
<h1>This is Title</h1>
<p>Paragraph goes here..</p>
<h2>This is Sub Title</h2>
<p>Paragraph goes here..</p>
<h2>This is Sub Title</h2>
<p>Paragraph goes here..</p>
</div>
<div id="sideright">
<h3>Title Menu</h3>
<ul>
<li><a href="#" title="Menu">Menu</a></li>
<li><a href="#" title="Menu">Menu</a></li>
<li><a href="#" title="Menu">Menu</a></li>
<li><a href="#" title="Menu">Menu</a></li>
</ul>
</div>
<div id="footer">
<h4>This is Footer</h4>
</div>
</div>
</body>
</html>
Dengan text editor anda, buatlah 1 file baru lagi. Copy dan paste kode-kode berikut ke dalamnya, lalu save dengan nama layout.css. Letakkan kedua file pada folder yang sama.
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
}#container {
width: 900px; /* Set the value to fit your needs. */
margin: auto;
}#header {
height: 100px; /* Set the value to fit your needs. */
border: 1px solid #000;
clear: both;
}#sideleft {
float: left;
width: 170px; /* Set the value to fit your needs. */
margin: 10px 0;
padding: 10px;
border: 1px solid #000;
}#middle {
float: left;
width: 474px; /* Set the value to fit your needs. */
margin: 10px;
padding: 10px;
border: 1px solid #000;
}#sideright {
float: right;
width: 170px; /* Set the value to fit your needs. */
margin: 10px 0;
padding: 10px;
border: 1px solid #000;
}#footer {
height: 40px; /* Set the value to fit your needs. */
border: 1px solid #000;
clear: both;
}
Lalu buka file layout.html dengan menggunakan browser.
Kita akan mendapatkan hasil mirip gambar berikut:
Yap, hasil sederhana ini adalah pondasi layout 3 kolom yang bisa anda jadikan basis untuk membangun layout yang lebih kompleks. Selamat coding!
brarti theme bisa diubah layoutnya, yang dr appearance-editor yak… sorry blm medheng boss
yudiacro Reply:
20 Agu 2009 at 11:24
@trieand, kalau ubah theme edit langsung file-nya langsung. Bisa juga dari appearance-editor yang kamu bilang. Tapi tidak semua theme bisa di edit via admin panel.
File theme tersimpan di hostingan kita. Jadi kita membutuhkan FTP utk ambil file tsb. Kemudian di edit, lalu di kembalikan lagi ke hostingan.
Jangan takut tanya kalo gak mudheng ya. Kan semua juga awalnya gak ngerti. Kita semua sama2 belajar di sini :)
salam kenal mas berdua…
saya masih newbie mas, perkenankan belajar dari artikel2 blog anda…
semoga anda ber2 sukses
trims
yudiacro Reply:
20 Agu 2009 at 18:53
@IwanKus, makasih atas kunjungannya ke CID Mas.
Kami juga newbie di bidang online business Mas.
Untuk hal ini kami yakin Mas sudah ada di depan.
Jadi sama2 belajar dan saling berbagi ya Mas.
Sukses juga untuk Mas.
mantabbb nambah 1 lagi referensi untuk belajar coding dan wordpresss… salam hangat mas… :D
ALFRED :D
Oh iya…mau tanya satu hal mas, taoi mohon maaf mungkin agak menyimpang dari topik…
saya sedabg berusaha menginstall sofware xammp supaya bisa utak-atik wp di local host, software sudah terinstall dengan baik, dan statusnya running, tapi ketika saya mencoba membuka alamat http://localhost di browser saya (modem mati), prosesnya lama sekali, hampir setengah jam saya tunggu, tapi dikatakan oleh browser masih loading, saya tunggu setengah jam lagi, tetap loading…apa prosesnya memang seperti itu ya mas?
PC saya Pentium 4, 2.4 ghz, RAM 512, VGA card terintegrasi, windows XP service pack 2 Home ed
mohon bantuannya mas
makasi :D
yudiacro Reply:
22 Sep 2009 at 20:16
@Alfred, salam kenal Mas Alfred. Kejadian seperti itu bisa terjadi krn bbrp hal. Mulai dari kesalahan prosedur penginstalan, software XAMPP-nya yg corrupt, seting Document Root yang salah, dll.
XAMPP kebutuhan minimalnya cuma 64MB RAM, 200MB disk dan Windows 98. Jd spec Mas sdh jauh dari cukup. Komp saya yg Pentium 1 (yup Pentium 1!) aja bisa dulu hehe.
Ada baiknya Mas Alfred mengggunakan XAMPP versi portable saja. Selain Windowsnya nnt akan lebih bersih, juga relatif lebih mudah utk nge-trace apabila terjadi error. Mas bisa donlot Portable XAMPP di sini. Lalu lakukan instalasi sesuai prosedur (ada di readme.txt).
Kalau masih terjadi error seperti di atas, Mas Alfred bisa kontak saya via YM: yudiacro. Mungkin saya bisa bantu menemukan dimana letak salahnya. Good luck and have a nice day :)
terima kasih atas infonya, sangat membantu saya yg blm ngerti bahasa it
yudiacro Reply:
12 Okt 2009 at 18:53
@sulistiyo, sama-sama Mas Sulistiyo. Makasih sudah berkunjung :)