Buat navigasi bar bercabang untuk blog

Menu  Navigasi bercabang (dropdow menu) adalah menu navigasi yang berfungsi  untuk menghubungkan link satu dengan link lainnya, biasanya diletakan  dibawah atau diatas header, seperti contoh berikut :

 untuk membuatnya sebagai berikut :

1. Login ke dasbor ---> tata letak --->  edit HTML (centang : expand template widget)

2. Cari kode berikut :

]]>

3. Kopy paste kode dibawah ini diatas kode tadi :

   /* Navbar */

#menu{margin:0 auto; padding:0; height:30px; width:100%; display:block;  background:url(http://i40.tinypic.com/21bnh2e.jpg) repeat-x;

opacity: 0.99; filter: alpha(opacity: 50);}

#menu-cari{float:right; display:inline; padding:3px 5px 0 0;}

#menu ul{padding:0; margin:0;}

#menu ul li{padding:0; margin:0; list-style:none; display:block; float:left;}

#menu ul li a{float:left; padding-left:15px; display:block;  color:#330000; text-decoration:none; font:13px Verdana, Arial,  Helvetica, sans-serif;  background:url(http://i40.tinypic.com/21bnh2e.jpg) 0px -30px no-repeat;  line-height:30px; padding-right:15px;}

#menu ul li a:hover{background-position:0px -60px; color:#330000;}

#menu ul li a.active, .menu li a.active:hover{background-position:0px -90px; color:#330000;}

#menu ul li ul {display:none;}

#menu ul li:hover ul, #menu ul li.hover ul {position: absolute; max-width:175px;

display: block; background:#000000; margin:2px; clear:left; margin-top:30px;}

#menu ul li:hover ul li, #menu ul li.hover ul li {width:175px; float: left; background: display: block;}

#menu ul li:hover ul li a, #menu ul li.hover ul li a{border-top:0px dotted #fff; background:LightSkyBlue; width:175px;}

#menu ul li:hover ul li a:hover, #menu ul li.hover ul li a:hover{background:#00CCFF;}

.status-msg-wrap{

display:none;

}

4. Simpan lalu masuk ke Tata letak & klik  tambah gaddget  yang ada dibawah header blog.

Lalu pilih HTLM/JavaScript, setelah muncul jendela JavaScript, kopy paste kode berikut :

<div id="menu">
<ul>
<li><a class="active" href="/"> Home</a></li>
<li><a href="http://bibitlele.com">Bibit Rele 1</a></li>
<li><a href="http://rajagrosir.com">Raja Grosir</a>
<ul>
<li><a href="http://rajagrosir.com/products/39/0/SONIC-BALL/">Sonic Ball</a></li>
<li><a href="http://rajagrosir.com/products/34/0/SONIC-STICK/">Sonic Stick</a></li>
</ul></li>
<li><a href="http://bibitlele.com/newsindex.php">News</a>
<ul>
<li><a href="http://beliparfum.blogspot.com">Parfum Murah</a></li>
<li><a href="#">Menu 3.2</a></li>
<li><a href="#">Menu 3.3</a></li>
<li><a href="#">Menu 3.4</a></li>
</ul></li>
<li><a href="#">Menu 4</a></li>
<ul>
</ul>
</ul></div>

 
Lalu Simpan, tanpa diberi judul diatasnya.

catatan untuk  kode "#" isi dengan alamat url target anda (lihat gamabar paling  bawah), tanda petiknya jangan di hilangkan dan tulisan Menu,  menu 1,  menu 2 dst silahkan isi sesuai kehendak.  misalnya :

a. untuk yang tunggal (Tulisan 'Menu1" saja)