Jika kemarin anda sudah belajar menentukan zona-zona di blog termasuk juga membuat desain sementara blog. Saat-nya kita mengatur wilayah tiap zona. Seperti diketahui, kemarin kita cuma memberi nama saja zona-zona yang ada menggunakan tag DIV. Nah, hari ini kita akan menentukan lebar masing-masing zona lengkap dengan tata letaknya sehingga tampilannya nanti akan mendekati design awal kita.
Untuk itu, kita akan buka kembali file index.php dan meminta file tersebut untuk mengakses file style.css yang akan menjadi pemandu dalam tata letak dan tampilan blog nanti. caranya gimana? Perhatikan baris 1 -4 di file index.php yang sudah kita buat kemarin. Disana terlihat kode seperti ini:
<html> <head> <title>Theme Ujicoba</title> </head>
Nah, untuk memanggil style.css, kita tinggal menambahkan sebaris kode ini sebelum tag
</head>:<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
Disana terdapat sebuah fungsi WordPress yaitu bloginfo. Fungsi ini berguna untuk menampilkan informasi blog termasuk nama, deskripsi, rss, dll. Karena kita akan memanggil file style.css theme, maka kita gunakan perintah
<?php bloginfo( 'stylesheet_url' ); ?>
Simpanlah file index.php yang sudah kita tambahin style. Biar jelas, hasil akhir kodenya nanti akan seperti ini:
<html> <head> <title>Theme Ujicoba</title> <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" /> </head>
Sampai sini paham ya?
Oke, berikutnya kita beralih ke 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. Ibaratnya, ini pagar paling luar lah. Masukkan ini di baris paling bawah style.css
#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. Dari perintahnya kira-kira jelaskan? border untuk nentukan garis tepi, width=lebar, margin jarak antara border dengan tepi browser atau elemen lain. Padding untuk menentukan jarak antara border dengan tulisan.
Seharusnya tampilan blog anda akan seperti ini (klik untuk memperbesar):
Makin seru ya? Yuk, kita tangani bagian headernya. Untuk header ini, kita tentukan saja tingginya. Nantinya bisa kita isi juga lho dengan gambar. Tapi untuk sementara kita bikin jarak dulu biar ndak puyeng 
lagi-lagi tambahkan kode ini di bagian paling bawah style.css lalu simpan
#header {
height:120px;
background:#cccccc;
}
Ada 2 perintah lagi yang kita masukkan yaitu height untuk menentukan tinggi header. Dalam contoh diatas saya buat 120 pixel. Untuk lebarnya tidak kita tentukan karena dia akan mengikuti wrap yang sudah kita tentukan di atas tadi. Kemudian perintah background adalah menentukan latar belakang zona header ini. Dalam contoh ini saya buat warna abu-abu. Untuk kode-kode warna lain, anda bisa lihat di: html-color-codes.com
Harusnya sekarang kalau direfresh blog anda, maka akan ada box abu-abu di bagian headernya. Tidak usah screen shot ya? Udah bisa bayangkan kan? Kalau belum ya lihat aja blog anda sendiri.. xixixi..
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 ya di style.css
#maincontent {
margin-top:10px;
}
#content {
width:590px;
background:#FFCC00;
float:left;
}
#sidebar {
width:300px;
background:#FF9900;
float:left;
margin-left:10px;
}
Ada satu perintah tambahan lagi yaitu
float:left;. Perintah ini dipakai untuk membuat elemen dibawahnya mengalir ke sebelah kanan. Maksudnya left adalah elemen yang bersangkutan ada di kiri dan yang lain ada di kanan
Jika lihat blog anda sekarang, harusnya bagian tengah sudah terpecah jadi dua bagian. Untuk content dan untuk sidebar. Yuk, kita terusin lagi menambahkan style untuk zona lebar, kiri dan kanan yang ada di dalam sidebar
#lebar {
background:#FF3300;
margin-bottom:10px;
}
#kiri {
background:#660000;
width:145px;
float:left;
margin-right:10px;
}
#kanan {
background:#660000;
width:145px;
float:left;
}
Perintahnya udah ngerti semua kan? Gak ada yang baru
Kalau dilihat sekarang, mustinya sudah mulai mirip deh desain blog kita. Cuma masih warna-warni.. hehehe.. Gpp, ini biar anda lebih mudah melihat elemen-elemennya. Untuk footernya kita biarkan aja gitu ya? Dan inilah hasil akhirnya sampai pelajaran ini
Oke, biar ada waktu untuk praktek, silahkan deh dicoba dulu di rumah. Insya Allah besok kita lanjutin dengan perintah-perintah yang lebih keren lagi.
PS: Jangan lupa ngajak teman untuk ikutan belajar ya? Biar seru!
Diakses dg kata kunci:
membuat layout dengan css (26), membuat theme wp (21), bikin tema wordpress (21), tema wp (18), fungsi layout (16), membuat theme wordpress dengan dreamweaver (14), membuat template wordpress dengan dreamweaver (7), cara membuat layout css (6), membuat layout php (6), membuat layout dengan php (5), membuat layout web dengan php (5), wordpress or id/bikin-tema-wp-layout html (4), contoh layout dengan css (4), membuat layout dengan dreamweaver (4), buat themes wp (3), contoh layout html (3), mengganti dreamweaver dengan wordpress (3), membuat layout keren dengan css (3), membuat layout web php (3), cara membuat header dengan menggunakan dreamweaver (3), membuat layout css dengan dreamweaver (3), cara membuat tampilan web menggunakan dreamwever (3), cara membuat layout di dreamweaver (3), cara buat layout menarik pada word (2), cara memanggil file php di dreamweaver cs5 (2), perintah merubah posisi form login dengan html (2), dimana letak stylesheet wordpress (2), desain template wordpress dengan dreamweaver (2), desain layout web MENGGUNAKAN DREAMWEAVER (2), perintah hiperlink html agar tampilan awal muncul (2), mengatur layout dengan css (2), cara memasukan background ke dalam web menggunakan dreamweaver cs5 (2), cara membuat header gambar dengan dreamweaver cs5 (2), cara membuat layout dengan html (2), panduan buat garis tepi di tampilan word (2), membuat layout css (2), mengatur margin pada post wordpress 3 3 1 (2), cara membuat garis di php (2), bagaimana membuat design layout web dengan perintah div (2), cara membuat layout menggunakan html (2), desain blog bagus dengan wp (2), membuat home page menggunakan html dan css pada dreamweaver cs5 (2), merubah tampilan wordpress dengan dreamweaver (2), contoh tampilan web form login keren (2), mengatur margin di wordpress (2), cara membuat layout dengan css (2), contoh layout web css (2), fungsi wrap pada css (2), gratisan buat menu pada halaman dreamwever8 (2), contoh layout css (2)
Daftar Isi Membuat Theme WP
- Cara Membuat Theme WordPress
- Membangun Theme WP: Style.css
- Membangun WP Theme: index.php
- Bikin Theme WP: Designing
- Bikin Tema WP: Layout
- Membuat Theme: Heading
- Buat Theme WordPress: Blog Header
- Buat Theme WP: Konten
- Mengatur Konten dalam Themes WordPress
- Styling Konten WordPress
- Membuat Sidebar Widget
- Styling Sidebar
- Membuat Footer
- Membuat Custom Background
- Membuat Drop Down Menu
- Search Form Gaya dengan Image
- Memasang Featured Image
- Memperbaiki tampilan halaman depan
- Membuat Featured Slide Show
- Bermain-main dengan Looping WordPress
- Memecah File Themes
- Memecah Sidebar
- Membuat File Single.php, archive.php, dll
Makin muantep kursus bikin theme-nya nih..
Emang benar, kalau cuma baca ya bakal lewat nih ilmunya. Harus praktek biar mampir diotak.
sip..sip..!!! bener2 datail
Hum berhasil mas,tapi untuk edit kode css yang pertama kok kayaknya gagal mas ya karena nggak ada garis yang muncul,apa karena bordernya berwarna putih ya?
kalau border putih, background putih ya ndak kelihatan bos
Ada yang error di perintah memanggil file style.css.
Di tutorial tertulis:
( ‘stylesheet_url’ )
Saya ganti menjadi:
(‘stylesheet_url’)
Perbedaannya ada di spasi.
Yups… thanks….
kalau pake dreamweaver bagaimana mas??? lebih gampang kah???
soal na ane dah lupa script2 na html nih…..
Gak pernah pakai dreamweaver sih, jadi nggak tahu ya. Tapi kalau yang dipakai mode HTML-nya ya bisa aja.. hehehe..
Dreamweaver ditambahi extension yang mendukung penyisipan code2nya wordpress. Saya lupa nama extensionnya dan yang gratis kayaknya cuma satu.
gan, stop dulu.. Biar tak cobae.
ditutup blognya udah stop kok hehehe… Cek daftar isinya aja biar ndak lupa
makasih ya mas buat tutorialnya.
Saya sedang coba buat menu drop down mas di wordpress,
kasih tutorialnya dong mas, secara step by step…..???
maksih lagi ya mas
salam
makasih mas lutvi saya memang lagi mendalami wordpress…sangat membantu sekali…semoga makin bertambah ilmunya…..
..tutorial menarik… kbetulan lgi doyan utak atik theme…
mas lutvi saya mau menanyakan kok garisnya g muncul ya?? apa ada yang kurang dari kode css yang saya tulis :
/* Theme Name: Theme Gue Theme URI: http://wordpress.or.id/ Description: Theme Pertama yang Gue Buat untuk Bangsa Indonesia Tercinta Author: Lutvi Avandi Author URI: http://lutviavandi.com/ Version: 1.0 */ #wrap { border:solid 7px #CC0; width:900px; margin:0 auto; padding:10px; }Kode warnanya coba buat 6 digit aja. Kalau 3 biasanya sering bermasalah
siiipp siipp tambah info kode warna
ini mas. yang saya cari… saya sangat mencari cara ni… terima kasih bung !!!
asik2…saya udah sampe tutor ini..yihhhuuuuuuuuuuuuuu
wah seep mas tutorialnya.. makin semangat nih belajar web ..
Mau tanya kakak, kalau penulisan id dalam style.css nya tidak berurutan, maksudnya tidak mengikuti susunan yang ada, misalnya
kode asal :
#wrap {
border:solid 1px #000;
width:900px;
margin:0 auto;
padding:10px;
}
#header {
height:120px;
background:#cccccc;
}
kemudian saya ubah menjadi #header dulu baru #wrap dulu,,,
Apakah bermasalah atau tidak ?
Makasih
Kalau berbeda, tidak ada masalah. Kalau sama, maka yang dipakai adalah yang terakhir
Kerennnn tenannn,,, mangstabbzzz,, jadi semangat mo bikin theme sendiri
Awesome..!! alhamdulillah tampilan theme ane tampilannya mirip ditutorial ini, artinya berhasil..! hehe
mas, saya masih belum paham dengan perintah #lebar, #kiri, dan #kanan. mengapa perintah tersebut sudah terdefinisi sbg sidebar bukan sbg header, content atau yg lainnya? makasih atas balasannya.
tanda pagar didepan string pada CSS itu artinya ID atau identitas. Dan yang namanya identitas ya sesuka yang ngasih nama
Mau pakai nama #masher1 #masher2 #masher1000 ya nggak ada masalah. Jadi itu bukan perintah. Nah, yang di dalam kurung kurawal itulah baru perintah yang akan dijalankan oleh setiap tag yang memiliki identitas yang disebutkan 
Silahkan googling dan dalam soal basic CSS biar makin paham
Ini karena di index.php kita nulis
Sidebar kiri ada disini
masih inget kan? bahasa newbie
hmm gak tampil scriptnya..diulang ya
..newbie bntu jwb
karena di index.php kita tulis
Sidebar kiri ada disini
ilangin tanda *
Artikel yang bagus untuk saya yang sedang belajar WP..
Makasih Pak Lutvi, artikelnya sungguh sangat bermanfaat. Semoga berkah dan mendapat balasan dari Yang Maha Kuasa.
mas, hasilnya di mozilla sama ie kok berbeda ya? pake mozilla sama hasilnya sprti contoh gmbr d atas tapi, setelah dibuka dngn ie wrap sama sidebarnya terletak di sebelah kiri semua. kira2 kesalahan terletak di mana ya? thanks…
mas perintah <link rel="stylesheet" type="text/css" media="all" href="” />
gagal, file style.css nya tidak terbaca, saya menggunakan dreamweaver cs5.5
kok ga lengkap scriptnya ya mas, bagusnya lengkap. udh dikasih ne blom ” />
itu karena copy paste ya codenya?
sebagian hasil copy paste kalo outputnya dilihat view source-nya maka akan terdapat tambahan simbol2 yg tidak bisa dibaca dibrowser..
sebaiknya anda ketikan saja codenya manual, sekalian belajar css juga lho…
Ok.
tp setelah saya coba di notepad++ bisa, akhirnya saya coba lanjutin dan berhasil hhehe !! thkz udh berbagi !!
saya ada masalah pada tag id=”wrap”
yg mana kalau aku status login (admin)
wrap tsb bergeser kebawah kira2 30px (saya kira mirip2 margin) tapi kalau saya logout wrapnya kembali normal yaitu nempel di bagian paling atas kata lain g ada jarak antara top dan wrap
Mas, ada yang error di perintah memanggil file style.css.
Di tutorial tertulis:
( ‘stylesheet_url’ )
Saya ganti menjadi:
(‘stylesheet_url’)
Perbedaannya ada di spasi.
Bukan mengajari, hanya untuk koreksi saja jika ada rekan2 lainnya yang mengalami error serupa.
Salam,
Bony
wah.. udah jam 10 mlm tapi tutorialnya masih bisa buat semangat nih buat dicobain
kenapa saya belum berhasil ya..?tidak ada yang muncul sama sekali kalo script : <link rel="stylesheet" type="text/css" media="all" href="” /> di masukan di bagian headernya. knapa ya?
hajar trusss…ijin copas di word ane..buat pegangan…
Mohon bantuan, bagaimana caranya mengganti web yg sudah online dengan menggunakan dreamweaver ingin kami ganti dengan web berbasis wordpress, terimakasih
update trus gan tutorialnya ane nunggu selanjutnya ya
mohon bantuannya gan punya ane k g jalan ya style.css nya?
sekarang ngincip mbaca dulu,mas lutvi.
krn pnasaran.hehehe
majukan bisnis online dan pupuk indonesia ?
indonesia
Tutorialnya mudah di cerna, jadi semakin asyik!!!
Mas Lutvi…. makasih banyak tutornya… punyaku dah di coba kok malah syntaxnya error…. error muncul pas saya masukil
<head><title> <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo('stylesheet_url'; ?>"/> </title> </head>kenapa yaaa?? mohon bantuannya…
tolong donk mas kok syntaxnya masih error terus kenapa yaa??… padahal udah sama semua…
tolong donk mas kok syntaxnya masih error terus kenapa yaa??… padahal udah sama semua…
tolong donk mas kok syntaxnya masih error terus kenapa yaa??… padahal udah sama semua…tolong donk mas kok syntaxnya masih error terus kenapa yaa??… padahal udah sama semua…
<html> <head><title>uji coba</title> <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' );"/> </head> <body> <div id="wrap"> <div id="header" Lokasi Header Disini </div> <div id="maincontent" <div id="content"> Artikel akan muncul disini </div> <div id="sidebar"> <div id="lebar"> iklan kotak ada disini </div> <div id="kiri"> Menu sidebar kiri disini </div> <div id="kanan" menu-menu sidebar kanan disini </div> </div> </div> <div style="clear:both;"> </div> <div id="footer"> Footer ada disini </div> </div> </body> </html> </body> </html>