Thursday, July 02, 2015
| http://wanskawani.blogspot.com/ | KAWANI MEDIA |
Setiap Template blog yang sudah tersedia mengandung unsur yang berbeda - beda, tapi dibalik perbedaan itu ada satu hal persamaan pada setiap design Template Web yaitu memiliki struktrur yang sama diantaranya, Header, Content, Sidebar dan Footer. Lalu sulitkah membuat sebuah Template Website yang sesuai dengan keinginan kita? Bisa dibilang Ya bisa juga tidak! Ini tergantung dari kreativitas para blogger. Kali ini saya akan
berbagi Tutorial Tips Cara Membuat Template Website sederhana, Yok kita coba!
Contoh dasar Layout Website adalah:
Langsung kita mulai:
Buka Code editor yang sering kita gunakan misalnya Notepad++, Sublime dll,
Buat sebuah file misalnya diberi nama blogedit, jangan lupa format dari file ini adalah HTML. Code yang digunakan untuk index HTML adalah:
<html>
<head>
<title>Membuat Layout sederhana</title>
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="header">
<span class="title">Dipakai untuk Header</span>
</div>
<div class="content">
<div class="entry-content">
<span class="title">Isi dari konten</span>
</div>
<div class="sidebar">
<span class="title">Isi dari sidebar</span>
</div>
</div>
<div class="footer">
<span class="title">Isi untuk footer</span>
</div>
</div>
</body>
</html>
Klik Save, kemudian kita tambahkan style untuk index HTML lalu buat file bernama style dengan format CSS, simpan satu folder dengan file index HTML tadi. Ini Code untuk style CSS:
.container{
margin:0 auto;
max-width:978px;
}
.header{
background:red;
height:200px;
}
.content{
overflow:hidden
}
.entry-content{
background:#eee;
width:642px;
float:left;
display:inline;
height:500px;
}
.title{
font-size:40px;
font-weight:bold;
}
.sidebar{
background:#21E28D;
width:336px;
display:inline;
float:left;
height:500px;
}
.footer{
background:#333;
height:200px;
}
margin:0 auto;
max-width:978px;
}
.header{
background:red;
height:200px;
}
.content{
overflow:hidden
}
.entry-content{
background:#eee;
width:642px;
float:left;
display:inline;
height:500px;
}
.title{
font-size:40px;
font-weight:bold;
}
.sidebar{
background:#21E28D;
width:336px;
display:inline;
float:left;
height:500px;
}
.footer{
background:#333;
height:200px;
}
Kemudian buka lagi index html di browser kita, jika tampilannya sama dengan Contoh dasar Layout Website diatas artinya kita sukses membuatnya dan berhasil dalam membuat tutorial ini. Bagaimana, cukup sederhana kan?
Demikian, semoga bermanfaat, terimakasih atas kunjungannya,mohon komentar dan sarannya, ini hanya sebatas berbagi dalam rangka mempererat silaturaahmi dengan kawan para blogger mani. Semoga sukses.
(diambil dari berbagai sumber)
Diposting Oleh : Unknown
Anda sedang membaca artikel tentang Cara Membuat Templet Blog Sederhana. Anda diperbolehkan mengcopy paste isi blog ini, namun jangan lupa untuk mencantumkan link ini sebagai sumbernya. Beritahukan kepada saya jika ada Link yang rusak atau tidak berfungsi. Apabila suka dengan postingan ini silahkan di Like dan Share dengan tidak lupa Komentar dan Masukannya.
0 komentar:
Post a Comment