Tips Membuat Menu Horizontal dan Navigasi Bar Pada Header

Membuat simple menu navigasi pada header, dimana menu ini sebagai penunjuk seperti catagori dan sebagainya disamping itu untuk lebih memudahkan pengunjung mengetahui letak serta artikel yang diinginkan. Biasalah creasi blogwalking dengan sedikit modifi HeHeHe.
Wis langsung aja seperti biasanya.

Langkahnya : ( sorii gak sempat ngasih contoh gambar )
1. Login blog
2. Layuot + Edit HTML + centang Expand Widget Templates
3. Cari kode --> /* header dan tambahkan kode dibawah ini :


Untuk simple navigation bar / text link

a. Cari dan tambahkan kode berikut :

/* Header */
#newnavbar ul li{
font-size:100%;
list-style-type: none;
display:inline;
padding:0px;
margin:10px;
border:0px solid;
}

b. Kemudian kode :

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='3'
showaddelement='yes'>

c. sava template
d. Buka Page Elements + Add a Page Element + add HTML/JavaScript, tambahkan kode dibawah :

<div id='newnavbar'>
<ul>
<li><a href="Alamat Keterangan1">Keterangan1</a></li>
<li><a href="Alamat Keterangan2">Keterangan2</a></li>
<li><a href="Alamat Keterangan3">Keterangan3</a></li>
<li><a href="Alamat Keterangan4">Keterangan4</a></li>
<li><a href="Alamat Keterangan5">Keterangan5</a></li></ul></div>

Text Link dengan Hover Effect

a. Tambahkan kode dibawah :

/* Header */
#newnavbar ul li{
font-size:100%;
list-style-type: none;
display:inline;
padding:0px;
margin:10px;
border:0px solid;
}
#newnavbar li a{
color:#dfffed;
}
#newnavbar li a:visited {
color: #57E964;
}
#newnavbar li a:hover {
color: #F88017;
background: #ffff66;

}

Langkah (b), (c), (d) sama seperti diatas


Image navigation bar / image link

a. Cari dan tambahkan kode berikut :

/* Header */
#newnavbar ul li{
list-style-type: none;
display:inline;
padding:30px;
border:0px solid;
}

b. sava template
c. Buka Page Elements + Add a Page Element + add HTML/JavaScript, tambahkan kode dibawah :

<div id='newnavbar'>
<ul>
<li><a href="Alamat Keterangan1"><img
src="Alamat Image1"></a></li>
<li><a href="Alamat Keterangan1"><img
src="Alamat Image2"></a></li>
<li><a href="Alamat Keterangan1"><img
src="Alamat Image3"></a></li>
<li><a href="Alamat Keterangan1"><img
src="Alamat Image4"></a></li>
<li><a href="Alamat Keterangan1"><img
src="Alamat Image5"></a></li></ul></div>

Image navigation bar dengan hover effect / image link dengan efek hover

a. Cari dan tambahkan kode berikut :

/* Header */
#newnavbar ul li{
list-style-type: none;
display:inline;
margin:0px;
padding:30px;
border:0px solid;
}
#newnavbar li a img{
height:30px;
width:30px;
}
#newnavbar li a:hover img{
height:40px;
width:40px;
background: #FF0000;
}
#newnavbar li a:visited img{
height:40px;
width:40px;
background: #00FF00;
}

b. sava template
c. Buka Page Elements + Add a Page Element + add HTML/JavaScript, tambahkan kode dibawah :

<div id='newnavbar'>
<ul>
<li><a href="Alamat Keterangan1"><img
src="Alamat Image1"></a></li>
<li><a href="Alamat Keterangan2"><img
src="Alamat Image2"></a></li>
<li><a href="Alamat Keterangan3"><img
src="Alamat Image3"></a></li>
<li><a href="Alamat Keterangan4"><img
src="Alamat Image4"></a></li>
<li><a href="Alamat Keterangan5"><img
src="Alamat Image5"></a></li></ul></div>