Contoh Layout Twitter

Hay gan pada kesempatan kali ini saya akan membuat layout yang sdkit kurang sama dengan twitter.
Berikut tampilanya:



Cara pembuatanya sedikit ribet sihh tapi saya akan mencoba menberi contoh pembuatanya:

  1. Buatlah sebuah File HTML melalui Notepad++,PHP designer atau sesuai dengan kemauan kalian
  2. Beri nama File html sesuai keinginan kalian
  3. Kemudian di bawah ini adalah scrip file HTMLnya
<!DOCTYPE HTML>
<html>
<head>
<title>template</title>
<link href="style.css" rel="stylesheet" type="text/css" /></head>
<body>
<div id="wrapper">
  <div id="header"> Header
</div>
<div id="navigasi"> Navigasi
</div>
<div id="kiri"> Kiri
</div>
<div id="tengah"> Tengah
</div>
<div id="kanan"> Kanan
</div>
<div class="clear">
</div>
<div id="footer"> Footer
</div>
</div>
</body>
</html>


</body>
</html>

  1. Kemudian buatlah File baru dengan format file CSS
  2. SImpan scripnya usahakan jadi 1 folder dengan file diatas
  3. Di bawah ini scripnya
#wrapper {
 background-color: #CE1818;
 display: block;
 height: auto;
 width: 980px;
 margin-right: auto;
 margin-left: auto;
 position: relative;
}

#header {
width:auto;
margin-top:5px;
height:100px;
padding:5px;
-moz-border-radius:15px;
background:#A22424;
border:#9966CC solid 1px;
}
#navigasi {
 display: block;
 height: 35px;
 width: 980px;
 background-color: #ccddee;
 float: left;
 position: relative;
 visibility: visible;
 z-index: 2;
 }
#kiri{
padding:5px;
height:300px;
width:210px;
margin-right:5px;
float:left;
margin-top:10px;
border-radius:15px;
-moz-border-radius:15px;
background:#901717;
}
#tengah{
padding:5px;
height:300px;
float:left;
width:520px;
margin-top:10px;
border-radius:15px;
-moz-border-radius:15px;
background:#073F7F;
}
#kanan{
padding:5px;
float:right;
height:300px;
width:210px;
margin-top:10px;
border-radius:15px;
-moz-border-radius:15px;
background:#99CCFF;
}
#footer{
padding:5px;
height:35px;
text-align:center;
background:#0cf;
margin-top:5px;
clear:both;
-moz-border-radius:15px;
}
.clear{
height:5px;
clear:both;
}

Jika sudah tingal RUN pada file Template selesai
Hasil layout:



semoga bermanfaat untuk semua
Jika ada kritik dan saran silahkan share di bawah
#saling membantu
Terima kasih