Black & Blue Navigation Bar - Menu bar pada sebuah blog sangatlah penting selain untuk memudahkan para pengunjung dalam menjelajahi isi dari blog kita , kehadiran menu bar juga sebagai penghias sebuah blog agar menarik . Kali ini [OBC] akan share Black & Blue Navigation Bar , sebuah menu yang sangat simple tapi tetap keren untuk dipasang pada sebuah blog. Dominasi warna hitam pada backround dan biru pada titlenya menjadikan menu yang satu ini cukup menarik buat brada pasang. Untuk lebih jelasnya silahkan brada lihat screenshot dan demonya.



Kustomisasi
  • Masuk pada Tataletak 
  • Add Gadget / HTML Javascript 
  • Masukan kode dibawah ini 
  • Save dan lihat hasilnya 
<style type="text/css">
#menu6 ul {
list-style:none;
font-family: "Trebuchet MS", sans-serif;
font-size: 28px;
font-weight: bold;
letter-spacing: -1px;
line-height: 1.1em;
float:left;
clear:both;
margin:20px;
border:4px groove #333333;
}#menu6 ul li{
float:left;
}#menu6 ul li a{
display:block;
text-decoration:none;
padding:10px 10px 5px 10px;
color:#fff;
background-color:#333333;
width:170px;
}#menu6 ul li a span{
display:block;
}#menu6 ul li a span.title{
border-bottom:2px solid #ffffff;
}#menu6 ul li a:hover{
background-color:#fff;
}#menu6 ul li a:hover span.title{
color:#008fe3;
border-bottom:2px solid #008fe3;
}#menu6 ul li a span.text{
padding:0px 5px;
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
font-style: italic;
font-weight: normal;
letter-spacing: normal;
line-height: 1.4em;
background-color:#008fe3;
visibility:hidden;
color:#fff;}
#menu6 ul li a:hover span.text{
visibility:visible;}
</style>
<div id="menu6">
<ul>
<li><a href="http://duniaradioku.blogspot.com/">
<span class="title">About</span>
<span class="text">Who we are</span>
</a>
</li>
<li><a href="#">
<span class="title">Portfolio</span>
<span class="text">What we do</span>
</a>
</li>
<li><a href="#">
<span class="title">Blog</span>
<span class="text">What we talk about</span>
</a>
</li>
<li><a href="#">
<span class="title">Contact</span>
<span class="text">How to get in touch</span>
</a>
</li>
</ul>
</div>
Kalau brada ingin memasang menu dibawah header atau diatas header
  • Masuk pada Edit HTML 
  • Cari kode ]]></b:skin>
  • Masukan kode dibawah ini tepat diatas kode ]]></b:skin>
<style type="text/css">
#menu6 ul {
list-style:none;
font-family: "Trebuchet MS", sans-serif;
font-size: 28px;
font-weight: bold;
letter-spacing: -1px;
line-height: 1.1em;
float:left;
clear:both;
margin:20px;
border:4px groove #333333;
}#menu6 ul li{
float:left;
}#menu6 ul li a{
display:block;
text-decoration:none;
padding:10px 10px 5px 10px;
color:#fff;
background-color:#333333;
width:170px;
}#menu6 ul li a span{
display:block;
}#menu6 ul li a span.title{
border-bottom:2px solid #ffffff;
}#menu6 ul li a:hover{
background-color:#fff;
}#menu6 ul li a:hover span.title{
color:#008fe3;
border-bottom:2px solid #008fe3;
}#menu6 ul li a span.text{
padding:0px 5px;
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
font-style: italic;
font-weight: normal;
letter-spacing: normal;
line-height: 1.4em;
background-color:#008fe3;
visibility:hidden;
color:#fff;}
#menu6 ul li a:hover span.text{
visibility:visible;}
</style>
Masih dalam Edit HTML , sekarang brada cari kode !!
  • <header> untuk memasang menu diatas nama blog
  • </header> untuk memasang menu dibawah nama blog
Pastekan kode dibawah ini diatas kode <header> atau </header>
<div id="menu6">
<ul>
<li><a href="http://duniaradioku.blogspot.com/">
<span class="title">About</span>
<span class="text">Who we are</span>
</a>
</li>
<li><a href="">
<span class="title">Portfolio</span>
<span class="text">What we do</span>
</a>
</li>
<li><a href="">
<span class="title">Blog</span>
<span class="text">What we talk about</span>
</a>
</li>
<li><a href="">
<span class="title">Contact</span>
<span class="text">How to get in touch</span>
</a>
</li>
</ul>
</div>

Save dan lihat hasilnya , mudah-mudahan brada suka hehe ..!!!
Good Luck ...


Tutorial