Tutorial Memasang Drop Down Menu Bar

Kali ni saya nak share tutorial memasang 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 Ma Belle Conway..

 

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!!

Diambil dari : SINI

Add your FB profile picture to create the largest FB invite card ever. So large FB won't ignore us! Pledge your support and you could win an exclusive invite to DiGi's LIVE FB Party. More info CLICK HERE!

Sign up HB!Affiliate to enjoy free gift!

Kliklah sini dulu.. Thanks!!

 

Suka entri ini, meh picit button kat bawah ni: