Baca Juga
Advertidement
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
 |
| klik gambar untuk memperbesar |
 |
| klik gambar untuk memperbesar |
- 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>
 |
| 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">Nah mungkin ini dulu pelajaran kita kali ini nanti kita lanjutkan pada tahap styling pada file CSS sampai jumpa pada tutorial berikutnya, selamat mencoba...
<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>
Advertidement
No comments:
Post a Comment
Blog Ini Dofollow Ya bro tapi jangan nyepam komentar secara bijak dan sesuai dengan postingan