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...
DEMO Itulah 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
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;
}
{
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;
}
{
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>
Resource by: http://www.9lessons.info/2010/11/blog-design-with-css-and-html.html
Loading... |
9 comments
DO NOT EVEN TRY ADD LINK [-X
You can use some HTML tags, such as
<b> - <i> - <a> - http://...jpg/gif/png/bmp - http://youtu.be/...