Cara Membuat Drop Down Menu Bar

Kali ni saya nak share tutorial membuat drop down menu bar.. Jenuh jugakla saya mencari tutorial ni, akhirnya terjumpa jugak yang simple but nice (bagi mata sepet me la..) Ini contoh menu bar blog Belle ini..

 

Macam biasa, pi kat Dashboard > Design > Edit Html... Sebagai langkah keselamatan, sila save dulu template uols sebagai backup.. Pehtu, tick kat Expand Widget Templates, then search </head>, copy code ini dan paste sebelum </head>.

 </font></font></p><p style="text-align: left; clear: both;" class="separator"><span class="fullpost"><!--jquery-DD-Menu-Starts--><br> <style type="text/css"><br> /* menu styles */<br> #jsddm<br> { margin: 0;<br> padding: 0}<br> <br> #jsddm li<br> { float: left;<br> list-style: none;<br> font: 12px Tahoma, Arial}<br> <br> #jsddm li a<br> { display: block;<br> background: <span style="color: red;">#324143</span>; /*DARK-GREEN*/<br> padding: 5px 12px;<br> text-decoration: none;<br> border-right: 1px solid white;<br> width: 70px;<br> color: #EAFFED;<br> white-space: nowrap}<br> <br> #jsddm li a:hover<br> { background: #24313C}<br> <br> #jsddm li ul<br> { margin: 0;<br> padding: 0;<br> position: absolute;<br> visibility: hidden;<br> border-top: 1px solid white}<br> <br> #jsddm li ul li<br> { float: none;<br> display: inline}<br> <br> #jsddm li ul li a<br> { width: auto;<br> background: <span style="color: red;">#A9C251</span>; /*LIGHT-GREEN*/<br> color: #24313C}<br> <br> #jsddm li ul li a:hover<br> { background: <span style="color: red;">#8EA344</span>}<br> </style><br> <br> <br> <!-- script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/<span class="IL_AD" id="IL_AD3">javascript</span>"></script --><br> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script><br> <script type="text/javascript"><br> var timeout = 500;<br> var closetimer = 0;<br> var ddmenuitem = 0;<br> <br> function jsddm_open()<br> { jsddm_canceltimer();<br> jsddm_close();<br> ddmenuitem = $(this).find('ul').eq(0).css('visibility', 'visible');}<br> <br> function jsddm_close()<br> { if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}<br> <br> function jsddm_timer()<br> { closetimer = window.setTimeout(jsddm_close, timeout);}<br> <br> function jsddm_canceltimer()<br> { if(closetimer)<br> { window.clearTimeout(closetimer);<br> closetimer = null;}}<br> <br> $(document).ready(function()<br> { $('#jsddm > li').bind('mouseover', jsddm_open);<br> $('#jsddm > li').bind('mouseout', jsddm_timer);});<br> <br> document.onclick = jsddm_close;<br> </script><br> <!--jquery-DD-Menu-Stops-http://bloggerstop.net-->

 

Sebelum paste, sila ubah code warna #324143; /*DARK-GREEN*/, #8EA344 dan #A9C251; /*LIGHT-GREEN*/ mengikut kegemaran uols. Nak cek code warna leh tengok kat sini.. Dah paste & save, sila pi kat Page Elements > Add a Gadget > Html/JavaScript type, then paste code ni kat widget tersebut..

</p><p><span class="fullpost"><!--BODY-CODE--><br> <ul id="jsddm"><br> <li><a href="#">JavaScript</a><br> <ul><br> <li><a href="#">Drop Down Menu</a></li><br> <li><a href="#">jQuery Plugin</a></li><br> <li><a href="#">Ajax Navigation</a></li><br> </ul><br> </li><br> <li><a href="#">Effect</a><br> <ul><br> <li><a href="#">Slide Effect</a></li><br> <li><a href="#">Fade Effect</a></li><br> <li><a href="#">Opacity Mode</a></li><br> <li><a href="#">Drop Shadow</a></li><br> <li><a href="#">Semitransparent</a></li><br> </ul><br> </li><br> <li><a href="#">Navigation</a></li><br> <li><a href="#">HTML/CSS</a></li><br> <li><a href="http://bloggerstop.net">Blogger Help</a></li><br> </ul>

Tukarlah nama menu tu mengikut kehendak uols, then save, maka letak widget tersebut di atas blog post ataupun bawah header, whichever is ur preference and voilaaa!!

credit : sini