Info Harga Komputer dan Gadget

Cara membuat Template wordpress dengan Dreamweaver Bagian 3 Mengatur Layout

advertisement
Cara membuat Template wordpress dengan Dreamweaver Bagian 3 Mengatur Layout
Kebali bersama saya edi prasetiyo dalam tutorial membuat template wordpress dan pada tahapan ini kita sudah memasuku tahap ketiga dimana sebelumnya saya sudah menulis tentang Cara membuat Template wordpress dengan dreamweaver Bagian 1 dan Cara membuat Template wordpress dengan Dreamweaver Bagian 2 Mengatur Body Nah sekarang kita akan mengatur layout sehingga kita dapat menampilkan konten blog yang ada di blog wordpress seperti Area header, menu, post, sidebar dan footer.

Nah sekarang buka kembali file index.php yang ada di localhost di directori theme wordpressnya dengan menggunakan  dreamweaaver lalu letakkan kursor diantara tag <body>..dan </body>
kemudian kita akan  menambahkan tag Div, untuk membuatnya didreamweaver sudah tersedia menu untuk menambahkan tag div, caranya pilih menu layout kemudian klik tombol insert div tag lalu pada jendela insert div tag masukan ketikan "wrapper" pada area ID, Untuk  lebih jelasnya lihat gambar berikut ini
Cara membuat Template wordpress dengan Dreamweaver Bagian 3 Mengatur Layout
klik gambar untuk memperbesar
Nah jika sudah klik Oke maka otomatis kode div tag akan muncul seperti gambar dibawah ini
Cara membuat Template wordpress dengan Dreamweaver Bagian 3 Mengatur Layout
klik gambar untuk memperbesar
Lakukan hal yang sama dengan nama tag id sebeagi berikut :

  • wrapper
  • header
  • menu
  • konten
  • post
  • sidebar
  • footer
Untuk Post dan sidebar masuk didalam div tag konten, dan tambahkan kode ini di atas div tag footer
<div style="clear:both;"></div>

Lihat gambar di bawah ini :
Cara membuat Template wordpress dengan Dreamweaver Bagian 3 Mengatur Layout
klik gambar untuk memperbesar

Nah untuk kode keseluruhannya seperti ini kalo masih bingung ya di copy aja kode ini :
<!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>Untitled Document</title>
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo ('stylesheet_url'); ?>" />
</head>
<body>
<div id="wrapper">
<div id="header">Content for  id "header" Goes Here</div>
<div id="menu">Content for  id "menu" Goes Here</div>
<div id="konten">
  <div id="post">Content for  id "post" Goes Here</div>
  <div id="sidebar">Content for  id "sidebar" Goes Here</div>
</div>
<div style="clear:both;"></div>
<div id="footer">Content for  id "footer" Goes Here</div>
</div>
</body>
</html>
Nah mungkin ini dulu pelajaran kita kali ini nanti kita lanjutkan pada tahap styling pada file CSS sampai jumpa pada tutorial berikutnya, selamat mencoba...

No comments:

Post a Comment

Blog Ini Dofollow Ya bro tapi jangan nyepam komentar secara bijak dan sesuai dengan postingan