Info Harga Komputer dan Gadget

Cara membuat Template wordpress dengan Dreamweaver Bagian 3 Mengatur Layout

Advertisement
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...
advertisement

7 comments:

Icoes Ephraem said...

Wah mantap bisa juga bkin theme buat WP :D, share donk ed theme WP karya ente :D. Terus berkarya ya..

Edikomputer said...

@Icoes Ephraem
Ada Nih Template wordpress Buatan Ane http://www.edikomputer.com/2013/03/free-template-wordpress-perdana.html

Anonymous said...

lanjutan bagian 4 nya mana nih gan ??

heru nurcahyo said...

tolong di lanjutin di bagian 4 nya gan. . . .

Tukang Taman Jakarta said...

Makasih Mas Atas Pencerahannya

Mas Mulki said...

Terimakasih Banayak mas :)
atas ilmunya

Movies With Me said...

Terimakasih sangat bermanfaat

Post a Comment

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