Belajar Membuat Templet Sendiri

Awalnya saya membaca cara membuat templet di mas Bahrul ulum tapi kenapa kok situs nya gak bisa dibuka lagi, daripada ilang ini ilmu mendingan saya taruh aja di postingan, biar gak hilang bagi temen-temen pemula yang ingin baca silahkan baca dan dipelajari sendiri ya... karena saya sendiri masih belajar dalam hal pembuatan templet daripada nanti salah ngasih tutornya, mending tanya saja sama para masternya. oh yaa... modal yang diperlukan untuk membuat templet ini tidak perlu software pembuat templet seperti Dreamwaver dan sebagainya cukup dengan notepad saja jangan lupa simpan atau save as file ini dengan nama dot html (.html) dan save as type nya all file, kemudian brows deh... dan silahkan dilihat hasilnya.



<html>

<head>

<title>Templet ku</title>
<style type="text/css">
/*------------------------------------------------
Theme Name: Template pertamaku
Theme URI: http://blogaku.com
Description: Ini Template pertama aku
created by <a href="http://blogaku.com/">blogaku</a> .
Author: Aku
Author URI: http://blogaku.com/
Date: 08 April 2010
----------------------------------------------- */

/*----Pengaturan layout blog mulai dari sini----*/

body {
width: 1000px
padding: 3px
background:#0ff;
font-family:Century gothic, Arial,Tahoma,sans-serif;
color:#126A9B;
font-size:13px;
text-align: center;

}

#kotakblog {
width:1000px;
border:1px solid #000;
background:#0ff;
}
#topbar {
width:920px;
height:30px;
border:1px solid #000;
background:#aaa;
}
#header {
width:920px;
height:100px;
border:1px solid #000;
background: #c0c0c0;
}

#navigasi {
width:920px;
height:30px;
border:1px solid #000;background:#ccc;
}

#tembok-utama {
width:920px;
border:1px solid #000;background:#ddd;
}

#kotak-posting {
width:500px;
border:1px solid #000;background:#eee;
}

#isi-Posting {
width:400px;
border:1px solid #000;background:#000;
}

#ruang-Sidebar {
float: left
width:350px;
height:100px;
border:1px solid #000;background:#abc;
}

#ruang-Sidebar-top-besar {
width:303px;
border:1px solid #000;background:#ff0fff;
}

#ruang-Sidebar-kanan {
width:150px;
border:1px solid #000;background:#bbc;
float: left
}

#ruang-Sidebar-kiri {
width:150px;
border:1px solid #000;background:#ccd;
float: left
}

#footer-kaki {
width:920px;
height:50px;
border:1px solid #000;background:#00ffff;
}
/*---akhir CSS sampai disini yaaaa---*/
</style>
</head>

<body>
<div id="kotak blog">
<div id="topbar">isi topbar</div>
<div id="header"><img src="jilbab_41.jpg"></div>
<div id="navigasi">isi navigasi</div>
<div id="tembok-utama">

<div id="kotak posting">
<div id="isi-posting">isi postingan</div>
</div>

<div id="ruang-Sidebar">
<div id="ruang-Sidebar-top-besar">isi ruang-Sidebar-top-besar</div>
<div id="ruang-Sidebar-kanan">isi ruang-Sidebar-kanan</div>
<div id="ruang-Sidebar-kiri">isi ruang-Sidebar-kiri</div>
</div>
</div>
<div id="footer-kaki">isi footer-kaki</div>
</div>
</body>
</html>

special thanks buat mas Bahrul ulum.

Subscribe to receive free email updates: