Cara membuat Menu Navigasi bercabang di 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 :

]]></b:skin>

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 ---&gt; Tata letak ---&gt; 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="#">Menu 1</a></li>
<li><a href="#">Menu 2</a>
<ul>
<li><a href="#">Menu 2.1</a></li>
<li><a href="#">Menu 2.2</a></li>
</ul></li>
<li><a href="#">Menu 3</a>
<ul>
<li><a href="#">Menu 3.1</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)
<li><a href="#">Menu1 </a></li> dirubah kodenya, menjadi :
<li><a href="http.www.mapasanda.co.cc/2010/01/tentang-saya.html">Tentang Saya</a></li>


b. untuk yang bercabang (tulisan "menu2, menu3 dst)

<li><a href="#">Menu 2</a>
<ul>
<li><a href="#">Menu 2.1</a></li>
<li><a href="#">Menu 2.2</a></li>
</ul></li>

 dirubah kodenya menjadi :

<li><a href="http.www.mapasanda.co.cc/">Tutorial</a>
<ul>
<li><a href="http.www.mapasanda.co.cc/2010/05/tutorial-blog">Tutorial Blog</a></li>
<li><a href="http.www.mapasanda.co.cc/2010/10/tutorial-komputer">Tutorial Komputer</a></li>
</ul></li>dan seterusnya lalu simpan

untuk mendapatkan alamat URL target cukup melihat diatas browser anda, seperti gambar dibawah ini :
semoga bermanfaat