Membuat Menu Navigasi Horizontal Dengan CSS
--------------------------------------------------------------------------------
- Login ke blogger
- Sekarang, Masuk ke Menu ''Template''
- Klik tombol ''Edit HTML''
- Gunakan CTRL +F , dan Cari kode ]]></b:skin , setelah ketemu taruhlah kode dibawah ini, di atas kode tersebut
/* The CSS Code for the menu starts here bloggertrix.com */
#roundbar_btrix {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimoFMz-436dGK1DWYM9J-aKf4h1dbhmnrxVytH5Oz7wUF3TqacphcN-7-0UrxOiFaoUDkUS6rWj6x2MRv3EATAlvSEcSr2MC1t4KsG7zOVQW5QHv8llCnzRMuKhQGZFUhF8UiJArrnLJk/s1600/round_menu.png);
background-repeat:no-repeat;
margin-left:14px;
padding-left:10px;
height:46px;
}
#round_btrix {
float:left;
height:27px;
margin-bottom:0;
font-size:100%;
width:1000px;
line-height:normal;
margin-top:0
}
#round_btrix ul {
list-style:none;
margin:0;
padding:0
}
#round_btrix li {
display:inline;
margin:0;
padding:0
}
#round_btrix a {
float:left;
padding-right:1px;
font-weight:bold;
text-decoration:none
}
#round_btrix a span {
display:block;
padding-left:10px;
padding-right:10px;
padding-top:10px;
font-weight:bold;
height:27px;
color:#FFF;
font-size:100%;
border-left:0 solid #dcdcdc;
margin-right:0;
float:none
}
#round_btrix a:hover span {
color:blue;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgk715sg4kGYxaeuJU7BARL81ux7ReRv9mcycwHjfkrIMtyDuxG5ZyK5k-PzwaKJf7S1Ybfh9riTNKgZAh67UDhv8IJ-sDFf8382xvvV_u5scexTQi_IzWwOOwogdItgTUZ0D2Q1zBJiw/s1600/round_hover.png);
background-color:maroon;
background-repeat:repeat-x;
height:27px;
padding-left:10px;
padding-right:10px;
padding-top:10px;
font-weight:bold;
font-size:100%;
background-position:0 0
}
- Setelah selesai, Klik Simpan Template''
Sekarang kita coba, penerapannya di blog
- Pergi ke ''Tata Letak''
- Pilih posisi, dan Klik ''Tambah Gadget''
- Sekarang pilih Widget ''HTML/JavaScript
- Copy kode di bawah ini, dan simpan di kotak yang tersedia
<div id="roundbar_btrix">
<div id="round_btrix">
<ul>
<li id="current"><a href="#" title="home"><span>Home</span></a></li>
<li><a href="#"><span>Albums</span></a></li>
<li><a href="#"><span>Download</span></a></li>
<li><a href="#"><span>Privacy Policy</span></a></li>
<li><a href="#"><span>Lyrics</span></a></li>
<li><a href="#"><span>Music</span></a></li>
<li><a href="#"><span>Videos</span></a></li>
<li><a href="#"><span>About</span></a></li>
<li><a href="#"><span>Contact us</span></a></li>
</ul></div></div>
- Ganti # dengan url yang ingin dituju
- Setelah di edit, Sekarang klik ''Simpan''
KATA PENUTUP
Dan Demikianlah Semoga artikel ini bermanfaat buat semua, dan sobat bole bertanya dan kasih pendapat tentang menu navigasi ini di kolom komentar di bawah ini
