Home
About
Editor Web OL
Code Learn
Html - 5
Css - 3
Code StyleRancangan gambar template blogger.
Kali ini kita akan membuat rancangan gambar template blogger dengan tampilan seperti berikut :
Keterangan:
- Warna ini adalah ruang lingkup body
- Warna ini adalah ruang lingkup wrapper
- Warna ini adalah ruang lingkup header
- Warna ini adalah ruang lingkup post wrapper
- Warna ini adalah ruang lingkup post
- adalah ruang lingkup sidebar
- adalah ruang lingkup footer
Contoh Kode Html dan Css :
<!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>Belajar Buat Template Blogger</title>
<style>
/*
Title : Belajar Buat Template Blogger
Design : Yanto Cusoy
Site : http://codestyle.blogspot.com
Deskripsi : Best Learning Template
Design : http://codestyle.blogspot.com
Work : 11-01-2012 *home
*/
body {background-color:#999;}
#wrapper {margin:15px auto; width:90%; height:auto; border:1px solid black; background:yellow; color:black; padding:5px}
#header {width:99%; height:auto; margin:5px auto; border:2px dotted red; background:green; color:white}
#post-wrap {max-width:99%; overflow:auto; margin:5px auto; border:2px dotted blue; background:#ff55aa; color:red;}
#post {width:70%; margin:5px; border:2px dotted blue; background:#553322; color:white; float:left;}
#sidebar {width:25%; margin:5px; border:2px dotted brown; background:#ccaa33; color:white; float:right}
#footer {width:99% auto; margin:5px auto; border:2px dotted white; background:#116666; color:white; }
</style>
</head>
<body>
<div id='wrapper'>
<div id='header'>Header
</div>
<br />
<br />
<br />
<div id='post-wrap'>
<div id='post'>Posting
<br />
<br />
<br />
<br />
<br />
<br />
</div>
<div id='sidebar'>Sidebar
<br />
<br />
<br />
<br />
</div>
</div>
<div id='footer'>Footer
<br />
<br />
<br />
</div>
</div>
</body>
</html>
Nah pada bagian selanjutnya kita akan membahas kode xml blogger pada template buatan kita.
Baca lanjut :
Judul: cara membuat template blogger sederhana secara offline bagian+4.
tes komentar untuk edit form komentar
BalasHapustes koment kedua
BalasHapus