Cara Memasang Menu Bar Horizontal (Part 2)

Mungkin anda telah melihat posting menu bar saya yang pertama, tapi, bagaimanakah yang kedua? Tampilannya cukup simpel dan enak dipandang (menurut saya) oke, langsung ke poin utama
Pertama, Login ke blog anda -> 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'/>

Kemudian, Cari kode ]]&gt;&lt;/b:skin&gt;
Tambahkan kode ini diatas kode ]]&gt;&lt;/b:skin&gt;

/* ^^^^^^^^ BELOW IS THE CODE FOR THE MENU ^^^^^^^^^^ */
#tabs31{
position:relative;
display:block;
height:39px;
font-size:11px;
font-weight:bold;
background:transparent url(images/bgOFF1.gif) repeat-x top left;
font-family:Arial,Verdana,Helvitica,sans-serif;
border-top:5px solid #ffffff;
width:900px;
margin:2px

}
#tabs31 ul{
margin:5;
padding:0;
list-style-type:none;
width:auto;
}
#tabs31 ul li{
display:block;
float:left;
margin:0;}

#tabs31 ul li a{
display:block;
float:left;
color:#666;
text-decoration:none;
padding:11px 20px 0 20px;
height:23px;
background:transparent url(images/bgDIVIDER1.gif) no-repeat top right;
}
#tabs31 ul li a:hover {
background:#c00000;
}
#tabs31 ul li a.current{
color:#B30000;
background:#000 url(images/bgON1.gif) no-repeat top right;

}
/* ^^^^^^^^ ABOVE IS THE CODE FOR THE MENU ^^^^^^^^^^ */

Ganti yang berwarna merah dengan warna sesuka anda, Bewarna merah ini untuk garis diatas menubarnya...
Ganti yang berwarna biru dengan sesuka anda, Bewarna biru ini untuk mengubah warna Menu bar jika anda pointer mendekati...


Kemudian, masuk ke Elemen Laman, -> Tambah Gadget -> HTML/JavaScript
Masukkan

<div id="tabs31">
<ul>
<li><a href="#" title=""><span>Home</span></a></li>
<li><a href="#" title=""><span>About Us</span></a></li>
<li><a href="#" title="" class="current"><span>Services</span></a></li>
<li><a href="#" title=""><span>Our Work</span></a></li>
<li><a href="#" title=""><span>Contact Us</span></a></li>
</ul>
</div>

Ganti # dengan alamat website nya..
Dan yang berwarna merah dengan Judul...
Sekian,, semoga membantu...

Tweet

Artikel Terkait: