belajar seting blog dulu ahhh
Lanjut dari post yang kemarin. Sekarang kita masuk ke tahap Designing atau menentukan penempatan blog lebih tepatnya. Untuk referensi, Yang saya gunakan adalah seperti ini, Untuk anda – anda sekalian terserah mau menyetting seperti apa, asalkan bisa mengikuti saja. Berikut sebagai referensi :
Penjelasanya :
1. Header Blog
2. Content (tempat munculnya setiap post nantinya)
3a. Sidebar Lebar
3b. Sidebar Kiri
3c. Sidebar Kanan
4. Footer
1. Header Blog
2. Content (tempat munculnya setiap post nantinya)
3a. Sidebar Lebar
3b. Sidebar Kiri
3c. Sidebar Kanan
4. Footer
Sudah jelas? atau masih ada yang belum paham? silahkan diteliti lagi. Nah, bagaimana membuatnya? simple, buka file index.php lalu edit menjadi seperti ini
<html>
<head>
<title>Theme Ujicoba</title>
</head>
<body>
<div id="wrap">
<div id="header">
Lokasi header ada 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-menu sidebar kiri ada disini
</div>
<div id="kanan">
Menu-menu sidebar kanan ada disini
</div>
</div>
</div>
<div style="clear:both;"></div>
<div id="footer">
Footer ada disini
</div>
</div>
</body>
</html>
Sudah mulai bingung? sabar jgn terlalu memikirkanya saya jelaskan. Sesuai tag id, disitu kita menamai setiap bagian sesuai fungsinya. Dan nantinya nama – nama itu akan digunakan untuk styling di style.cssnya. Sekarang selesai ya kita menamai wilayah dan designingnya.
Layout? kita belum mengeditnya kan? mari kita mulai. Kita coba memanggil Style.css untuk masuk ke Index.php. Caranya, masukan kode berikut
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
masukan sebelum tanda </head>. Nah sekarang kita akan mulai mengisi style.css nya.
#wrap {
border:solid 1px #000;
width:900px;
margin:0 auto;
padding:10px;
}
masukan kode diatas lalu disave. Cek di blog anda seharusnya sudah muncul garis dibagian pinggiranya. Sekarang kita mulai mengedit yang lain.
#header {
height:120px;
background:#cccccc;
}
kode diatas untuk styling header blog kita. dibagian <div id=”header”>. Paham?
#maincontent {
margin-top:10px;
}
#content {
width:590px;
background:#FFCC00;
float:left;
}
#sidebar {
width:300px;
background:#FF9900;
float:left;
margin-left:10px;
}
kode diatas untuk mengatur sesuai tagnya. dicocokan sesuai div nya nanti kelihatan setiap kode akan mengedit yang mana. Lanjutt ..
#lebar {
background:#FF3300;
margin-bottom:10px;
}
#kiri {
background:#660000;
width:145px;
float:left;
margin-right:10px;
}
#kanan {
background:#660000;
width:145px;
float:left;
}
sudah disave? coba diperhatikan satu persatu.. dan sekarang seharusnya blog anda sudah menjadi seperti ini :
Sekian dulu kita bikin layoutnya. yang penting sudah terlihat kan blognya? meskipun istilahnya orok baru keluar. Tunggu di post mendatang, kita akan bahas materi lain
