Membuat Menu ( Versi 3 )

Posted by : Nizoe Liee Jumat, 01 April 2011

Tutorial kali ini saya akan membahas bagaimana cara membuat Tab Menu Horizontal yang lebih mudah dan tidak sulit dan juga membuat ruang Blog atau Website menjadi lebih besar. Kalu masih pada penasaran silahkan kalian coba saja ya??

1. Sign in Blogger

2. Layout

3. Edit HTML

4. Jangan lupa berikan tanda centang pada Expand Widget Templates

5. Cari kode di bawah ini :
]]></b:skin>

6. Tambahkan kode ini diatasnya :

#navigation{

height:2.2em;

line-height:2.2em;

margin:0 1px;

background:#AF7817;

color:#ffffff;

}

#navigation li{

float:left;

list-style-type:none;

border-right:1px solid #ffffff;

white-space:nowrap;

}

#navigation li a{

display:block;

padding:0 10px;

font-size:0.8em;

font-weight:normal;

text-transform:uppercase;

text-decoration:none;

background-color:inherit;

color: #ffffff;

}

* html #navigation a {width:1%;}

#navigation .selected,#navigation a:hover{

background:#000;

color:#ffffff;

text-decoration:none;

}

7. Kemudian cari kode di bawah ini :
<div id='content-wrapper'>

8. Tambahkan kode ini diatasnya :

<div id='navigation'>
<ul>
<li class='selected'><a href='Alamat Link 1'>Home</a></li>
<li><a href='Alamat Link 2'>Tukaran Link</a></li>
<li><a href='Alamat Link 3'>Sumbangan</a></li>
<li><a href='Alamat Link 4'>Lain-lain</a></li>
<li><a href='http://klinik-tutorial.blogspot.com/'>klinik-tutorial</a></li>
</ul>
</div>

9. Save dan lihat hasilnya.