Cara Membuat Template Wordpress Dengan Dreamweaver CC Bagian 3

By: QMPC Network on 02.43

Jika di bagian 2 kita belajar menentukan zona-zona di blog termasuk juga membuat desain sementara blog. Saat-nya kita mengatur wilayah tiap zona. Seperti diketahui, di bagian 2 kita cuma memberi nama saja zona-zona yang ada menggunakan tag div. Pada bab 3 ini penulis akan menentukan lebar masing-masing zona lengkap dengan tata letaknya sehingga tampilannya nanti akan mendekati design awal kita di bagian 2 tadi. bagi yang belum membaca bagian 2 silahkan klik disini.

Langkah 1 :
Buka style.css dan mulai menentukan luas wilayah tiap-tiap zona. Zona awal yang kita tentukan adalah wrap. Fungsi zona ini untuk menentukan luas wilayah keseluruhan blog. Ketikan source code berikut ini setelah info tema :

#wrap {
  border:solid 1px #000;
  width:900px;
  margin:0 auto;
  padding:10px;
  }

Sekarang simpan dan coba lihat blog anda. Harusnya sudah ada garis hitam di batas terluar teritori blog. Dan kotaknya tepat berada di tengah-tengah browser. Keterangan :
Border = Untuk penentu garis tepi
width = Lebar
margin = Jarak antara border dengan tepi browser atau elemen lain.
Padding = Untuk penentu jarak antara border dengan tulisan.

Seharusnya tampilan blog akan seperti ini :

Langkah 2 :
Sekarang kita akan menangani bagian header, Untuk header ini, kita tentukan saja tingginya. Nantinya bisa kita kasih gambar juga. Tapi untuk sementara kita bikin jarak dulu dan tambahkan source code berikut ini di style.css lalu simpan :

#header {
  height:120px;
  background:#cccccc;
  }

Nanti akan seperti berikut ini :

Langkah 3 :
Berikutnya adalah bagian content. Untuk maincontent kita cuma akan berikan perintah untuk mengambil jarak 10px dari header sehingga kelihatan putih wilayahnya nanti akan mengikuti isinya yaitu content dan sidebar. Kita langsung kerjakan ketiganya di style.css,

#maincontent {
  margin-top:10px;
  }
#content {
  width:590px;
  background:#FFCC30;
  float:left;
  }
#sidebar {
  width:300px;
  background:#FF9930;
  float:left;
  margin-left:10px;
  }

Langkah 4 :
Jika lihat website kita sekarang, harusnya bagian tengah sudah terpecah jadi dua bagian. Untuk content dan untuk sidebar. Sekarang, kita terusin lagi menambahkan style untuk zona lebar, kiri dan kanan yang ada di dalam sidebar.

#lebar {
  background:#FF2244;
  margin-bottom:10px;
  }
#kiri {
  background:#1e01fb;
  width:145px;
  float:left;
  margin-right:10px;
  }
#kanan {
  background:#1e01fb;
  width:145px;
  float:left;
  }

Langkah 5 :
Selanjutnya jika dilihat sekarang, seharusnya sudah mulai mirip dengan desain layout. Dan untuk footernya kita biarkan aja dulu. Dan inilah hasil dari bagian 3 ini :

Langkah 6 :

Selamat mencoba :D