Cara Membuat Menu Navigasi Horizontal Tabs 6

Akhirnya bisa juga bikin menu bar. Agak sulit sih (maklum amatir). tapi tenang saja, saya akan ajarkan pada anda dengan cara yang seksama dan dalam tempo yang sesingkat-singkatnya hehe

Langsung saja ke TKP :


1. Login ke blogger anda > Layout >> Edit HTML

2. Cari Kode

<div id='header-wrapper'> <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='HTML5' locked='true' title='' type='HTML'/>

lalu ganti ganti sedikit menjadi seperti ini

<div id='header-wrapper'> <b:section class='header' id='header' maxwidgets='4' showaddelement='yes'> <b:widget id='HTML5' locked='false' title='' type='HTML'/>

3. cari kode

]]></b:skin>

lalu letakan kode ini di atasnya

/*- Menu Tabs 6--------------------------- */

#tabs6 {
font: bold 11px/1.5em Verdana;
float:left;
width:100%;
background:transparent;
line-height:normal;
}
#tabs6 ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabs6 li {
display:inline;
margin:0;
padding:0;
}
#tabs6 a {
float:left;
background:url("http://i953.photobucket.com/albums/ae17/abi-galoga/tableft6.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabs6 a span {
float:left;
display:block;
background:url("http://i953.photobucket.com/albums/ae17/abi-galoga/tabright6.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabs6 a span {float:none;}
/* End IE5-Mac hack */
#tabs6 a:hover span {
color:#FFF;
}
#tabs6 a:hover {
background-position:0% -42px;
}
#tabs6 a:hover span {
background-position:100% -42px;
}

Simpan

5. Masuk ke Page Elements (Elemen Laman) > Add a Gadget di atas kotak header >> masukan kode ini

<div id="tabs6">
<ul>
<li><a href='#' title='Judul link' class='current'><span>judul</span></a></li>
<li><a href='#' title='Judul link' class='current'><span>judul</span></a></li>
<li><a href='#' title='Judul link' class='current'><span>judul</span></a></li>
<li><a href='#' title='Judul link' class='current'><span>judul</span></a></li>
</ul>
</div>

Keterangan : ganti tanda pagar dengan alamat yang anda tuju, judul link dan judul di isi terserah anda.