Cara Memasang Menu Bar Horizontal

Jika anda memperhatikan menubar saya, menu bar itu saya dapatkan dari Dimas Abi Galoga teman saya sesama blogger. Kali ini saya ingin membagi ilmu, jadi perhatikan ya..Pertama, login ke blog --> Tata Letak --> Edit HTML.
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'/>

Sisispkan kode ini di atas kode ]]&gt;&lt;/b:skin&gt;

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

#tabs6 {
font: bold 11px/1.5em Verdana;
float:left;
width:100%;
height:35px;
background:url("http://i953.photobucket.com/albums/ae17/abi-galoga/Untitled-1-17.jpg") repeat-x;
line-height:normal;
}
#tabs6 ul {
font: bold 11px/1.5em Verdana;
margin:0;
padding:3px 10px 0 6px;
list-style:none;
}
#tabs6 li {
font: bold 11px/1.5em Verdana;
display:inline;
margin:0;
padding:0;
}
#tabs6 a {
font: bold 11px/1.5em Verdana;
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 {
font: bold 11px/1.5em Verdana;
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 {
font: bold 11px/1.5em Verdana;
color:#FFF;
}
#tabs6 a:hover {
font: bold 11px/1.5em Verdana;
background-position:0% -42px;
}
#tabs6 a:hover span {
font: bold 11px/1.5em Verdana;
background-position:100% -42px;
}
#navright{
width:20%;
font-size:11px;
float:right;
margin:0;
padding:0;
}

Llalu Simpan.. Beralih ke elemen laman
klik Tambah Gadget -> HTML/JavaScript -> masukkan kode ini
 

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

Ganti yang bewarna merah sesuai dengan keinginan anda.
Selamat mencoba.. based by : Abi-Galoga

Tweet

Artikel Terkait: