Simple Structure Design Blog

Blogger kita sekarang sudah pada jago sob, sudah pada bisa bikin template sendiri :-bd Jika sobat ada yang berminat mau mebuat template kreasi sendiri juga bisa kok! Asalkan mengetahui kode-kode dasar mengenai sebuah tampilan mengenai blog design ;) Mengapa kita harus mempelajari kode dasar ini, karena mau tidak mau menuntut kita nantinya bergaul juga dengan kode² ini sob :)) Mari kita tengok bagaimana caranya membuat blog design menggunakan CSS dan HTML secara sederhana...

Step 1

Layout web itu dasarnya dibagi menjadi 4 bagian, Header, Nav, Main dan Footer. Berikut div bagian itu dengan atribut Container.<div id="container">

<div id="header">1 Header</div>
<div id="nav">2 Nav</div>
<div id="main">3 Main</div>
<div id="footer">4 Footer</div>

</div>

Kode CSS

Dasar margin buat default browsingan margin:0 auto; dan centers a div

#container
{
width:900px;
margin:0 auto;
overflow:auto;
}
#header
{
height:90px;
}
#nav
{
height:30px;
}
#main
{
overflow:auto;
}
#footer
{
height:40px;
}

Step 2

Pada bagian main terdapat 2 bagian (content part) yaitu, main_left(article part) dan main_right(sidebar part)<div id="main">

<div id="main_left">Article</div>

<div id="main_right">Sidebar</div>

</div>

CSS code

#main
{
overflow:auto;
}
#main_left
{
float: left;
width:600px;
}
#main_right
{
float: left;
width:300px;
}

Step 3

Sekarang bagian membuat menu (ID nav) dengan atribut unorder list <ul><div id="nav">

<ul>
<li>HOME</li>
<li>PROJECT</li>
<li>TUTORIALS</li>
<li>FACEBOOK</li>
<li>JQUERY</li>
</ul>

</div>

#nav
{
overflow:auto;
}
#nav ul
{
list-style:none;
height:30px;
padding:0px;
margin:0px;
}
#nav ul li
{
float: left;
margin:10px;
}

Final Code

<div id="container">

<div id="header">
Header
</div>

<div id="nav">

<ul>
<li>HOME</li>
<li>PROJECT</li>
<li>TUTORIALS</li>
<li>FACEBOOK</li>
<li>JQUERY</li>
</ul>

</div>

<div id="main">

<div id="main_left">Article</div>
<div id="main_right">Sidebar</div>

</div>

<div id="footer">Footer</div>
</div>

CSS Code

<style type="text/css">
#container
{
width:900px;
margin:0 auto;
overflow:auto;
}
#header
{
height:90px;
}
#nav
{
overflow:auto;
}
#nav ul
{
list-style:none;
height:30px;
padding:0px;
margin:0px;
}
#nav ul li
{
float: left;
margin:10px;
}
#main
{
overflow:auto;
margin-top:3px;
}
#main_left
{
float: left;
width:600px;
min-height:400px;
}
#main_right
{
float: left;
width:300px;
min-height:400px;
}
#footer
{
height:40px;
}
</style>

DEMOItulah dasar2 kode untuk membuat sebuah design web/blog. Untuk melihat kode bawaan blogspot, sobat dapat mempelajarinya di my post ii. Selamat berkreasi yah sob, semoga bermanfaat :)
Resource by: http://www.9lessons.info/2010/11/blog-design-with-css-and-html.html