Tutorial : Cara nak buat Drop Down Menu Bar / Tab Menu Drop Down

by - 14:53:00

  Assalammualaikum, peace upon you.


Mungkin ada yang berminat dengan Tab Menu yang shida pakai bersertakan drop down menu-menu lain. Disini secara ringkasnya shida beri tutorial dia. Slowly buat insyallah berhasil, nampak memang macam susah sebab banyak koding sana sini tapi hasil dia superb! kalau korang pandai ubah warna dan image lagi awesome!. Sebelum tu tutorial ini shida kredit kan kepada Blogger Indonesia ni sebab tutorial dia paling mudah dan cepat shida buat, kira mudah faham selama shida cuba tutorial yang lain semua tak menjadi.

ikut langkah-langkah berikut :
  1. dashboard >> template >> editHTML >> tick expand widget
  2. cari kod ini >> ]]></b:skin>
  3. dah jumpa terus copy kod bawah ni dan paste diatas kod yang dicari tadi (langkah.2)
/* Menu Horizontal Dropdown ----------------------------------------------- */ #menuwrapperpic{background: url(http://2.bp.blogspot.com/-eVufkC686Cw/TwGo8YAlWwI/AAAAAAAAAYM/tWP7l3ENpjY/s1600/menubar.png) repeat-x;width:960px;margin:0 auto;padding:0 auto} #menuwrapper{width:960px;height:35px;margin:0 auto} .menusearch{width:300px;float:right;margin:0 auto;padding:0 auto} .clearit{clear:both;height:0;line-height:0.0;font-size:0} #menubar{width:100%} #menubar,#menubar ul{list-style:none;font-family:Arial, serif;margin:0;padding:0} #menubar a{display:block;text-decoration:none;font-size:12px;font-weight:700;text-transform:uppercase;color:#CECECF;border-right:1px solid #191919;padding:12px 10px 8px} #menubar a.trigger{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4oTUj9SeS6cqMCpdI9SLRC5QtwGUIv_mVj79EoDd5Ao0-bFrIip7FF5BGQ47Cd4BLQQFNQmDGZ5KTCryNW_WU1FDHrZOI4pfrH_ACxLFM6hbFm-xdiyi9cBEnkJxU-5HPh8Dsvpgvoyw/s1600/arrow_white.gif);background-repeat:no-repeat;background-position:right center;padding:12px 24px 8px 10px} #menubar li{float:left;position:static;width:auto} #menubar li ul,#menubar ul li{width:170px} #menubar ul li a{text-align:left;color:#fff;font-size:12px;font-weight:400;text-transform:none;font-family:Arial;border:none;padding:5px 10px} #menubar li ul{z-index:100;position:absolute;display:none;background:#222;padding-bottom:5px;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.6);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.6)} #menubar li:hover a,#menubar a:active,#menubar a:focus,#menubar li.hvr a{background-color:#222;color:#E98C0A} #menubar li:hover ul,#menubar li.hvr ul{display:block} #menubar li:hover ul a,#menubar li.hvr ul a{color:#edfdfd;background-color:transparent;text-decoration:none} #menubar li ul li.hr{border-bottom:1px solid #444;border-top:1px solid #000;display:block;font-size:1px;height:0;line-height:0;margin:4px 0} #menubar ul a:hover{background-color:#555!important;color:#fff!important;text-decoration:none}

langkah seterusnya :
  1. cari pula kod ini >> </header> atau pun bagi yang pakai denim cari kod ini >> <div id='crosscol-wrapper'>
  2. copy kod Menu Bar dibawah dan pastekan di bawah kod yang kita cari tadi (langkah.1)
<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li><a href='/'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1RTVXCja39RLTzZHVdNW2z6THqUXFoj3f5aVFA-vdNhZX1Kq-XA5h8pQ4exFr4hLGs0YejFwmm4-tZL2olwOTkjYs7X7fojvn3fgWFb7hHFDNq-b1Sza8LtO5nyXDLe2ZLo79kwi0MEI/s1600/home_white.png' style='padding:0px;'/> Home</a></li>
<li><a href='http://www.blogger.com/profile/masukkan ID' target='new'>Tentang Admin</a></li>
<li><a class='trigger'>Contact Us</a>
<ul>
<li><a href='https://plus.google.com/u/0/masukkan ID' target='new'>Goggle +</a></li>
<li class='hr'/>
<li><a href='http://twitter.com/masukkan ID' target='new'>Contact on Twitter</a></li>
<li><a href='http://www.myspace.com/masukkan ID' target='new'>Contact on Myspace</a></li>
<li><a href='http://www.facebook.com/masukkan ID' target='new'>Contact on Facebook</a></li>
</ul>
</li>
<li><a href='Link Anda' target='new'>Owner Creator</a></li>
<li><a class='trigger'>Tips dan Trik</a>
<ul>
<li><a href='Link Anda'>Komputer</a></li>
<li class='hr'/>
<li><a href='Link Anda'>Blogspot</a></li>
<li class='hr'/>
<li><a href='Link Anda'>Facebook</a></li>
<li class='hr'/>
</ul>
</li>
<li><a class='trigger'>Kategori</a>
<ul>
<li><a href='Link Anda'>TV Online</a></li>
<li class='hr'/>
<li><a href='Link Anda'>Komputer</a></li>
<li class='hr'/>
<li><a href='Link Anda'>Desain Grafis</a></li>
<li class='hr'/>
<li><a href='Link Anda'>Game</a></li>
<li class='hr'/>
<li><a href='Link Anda'>Microsoft</a></li>
<li class='hr'/>
<li><a href='Link Anda'>Software APP</a></li>
<li class='hr'/>
<li><a href='Link Anda'>Software Program</a></li>
</ul>
</li>
</ul> <div class='menusearch'>
<div style='float:right;padding:8px 8px 0 0;'>
<form action='Link Anda/search' method='get' target=''>
<input name='sitesearch' style='display:none;' value='Link Anda'/>
<input id='search-box' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;' style='width:170px;border:none;padding:4px 10px; font:italic 12px Georgia;color:#666; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyjYpBSdMvEbAF1TsrCsb74nsZYSg94rveTBixSYj6qDtBrng_hYUSSYCdSUflbl7AUynaWUa-Ee9oqYOG8WLbEpx6el3mL5IBcK2yZTjFxbY9J78WflVLanfJdu-9-Qc856K6aFzjx10/s1600/field-bg.gif) no-repeat;' type='text' value='search me'/><input align='top' id='search-btn' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYKg1fB2Hs2IpNTnX8mX6I1EVBBCNT2kh4GVUBQI73LPIf1tEZybZ3ek-GmYGLZYgeGXgDXv5plUWQKXPyYZ5SmHEzlYwTljx-38fedhDvnQYvCC1oKD1BEIiQJtL50T2EVYZd0xP6b18/s1600/bg_search.gif' type='image' value='Search'/>
</form></div></div><br class='clearit'/></div><div style='clear:both;'/></div>
  • korang dah siap paste semua preview dulu tengok hasilnya ambil gambaran dan fikir apa yang korang nak letak warna dan menu drop down korang ok. 
  • bila dah siap letakkan warna mengikut citarasa korang dan dah masukkan ID dan Link Anda preview lagi sekali.
  • tak semestinya korang kena ikut link yang tersedia ada tu korang boleh ubah ok. Ini dari asal tutor so shida tak ubah pun.
  • jika semua ok tiada cacat cela boleh SAVE. :)

Selamat Mencuba :)




You May Also Like

38 comments

  1. Assalamualaikum awak. bagus tuto ni! memang wajib buat. dah lama sheila cari ni. namanya dropdown menu tab eh. hehehehehe thanks.

    ReplyDelete
  2. Dah lama cari tutorial ni..nak cuba lah..terima kasih share. ^___^

    ReplyDelete
  3. nmpk mcm rumit tp kna try dlu..bru tau camne hasilnya kan..

    ReplyDelete
  4. bace tajuk fikir jap...ap tu ek? hihihi..skrg tahu dh...content blog tak bayak la..hihihi..nice sharing shida.. ^^vmgkn ad yg memerlukan nnt,,

    ReplyDelete
  5. huh!!! memang remy tak reti coding2 nie.....

    ReplyDelete
  6. err..byknya coding, silap haribulan hilang terus kalau nur buat..hihi

    ReplyDelete
  7. Nice sharing kak ^_^
    kalau rajin nanti nak try buat menu bar camni ;D

    ReplyDelete
  8. ingatkan senang..sush gak erk..hehe

    ReplyDelete
  9. banyakknyer coding..in shaa allah akan try nti..tab menu pon ct xder..hehehe

    ReplyDelete
  10. nice sharing shida.. jijah dah pon buat..hehee

    ReplyDelete
  11. a'aa akak berkenan dgn menu tab shida tu... canggih je.. :-)

    ReplyDelete
  12. yang langkah seterusnya tu tak jumpa code yang kena cari tu lah T.T macam mana ni >.< huk3

    ReplyDelete
  13. mmg best menu cmni sbb iras2 menu website ^^

    ReplyDelete
  14. wahhh, boleh cuba tapi nanti laa. aina punya entry pon tak banyak -_-

    ReplyDelete
  15. Pening, dkt template >edit html skg ni dah xda nak tick EXPAND WIDGET

    ReplyDelete
  16. Xjumpa lah EXPAND WIDGET dlm template ..edit html

    ReplyDelete
  17. Xjumpa lah EXPAND WIDGET dlm template ..edit html

    ReplyDelete
  18. salam dropdown tu menjadi, but camne nk buat dia buka pada window yg sama.

    ReplyDelete
  19. salam, camne nk buat drop down tu buka pada windows yang sama. hrp dpt membantu

    ReplyDelete
  20. @En.Ezzo setahu saya selepas link url kita jgn letak kod ini > target="_blank" sebab dia akan buka new window..hope mmbntu la..

    ReplyDelete
  21. @eastmaell template baru mmg xde expand widget so just abaikn yer ni tutor lama mmg ade expand widget pada HTML

    ReplyDelete
  22. @Shida Radzuan

    tq...nk tanye mcm2 je rasa ni pasal br je buat blog..contentnye pun xde ape sgt lg huhu...klu content xbyk mmg xblh add adsense ke??

    ReplyDelete
  23. Assalamualaikum Kak Shida, saye pakai denim tapi nape xde kod tu ey ?

    ReplyDelete
  24. kak shida kenapa saya tak jumpa coding nie ..hmm..tolong saya..

    http://www.eymasushoppe.blogspot.com

    ReplyDelete
  25. Salam Kak Shida. Saya nasuha. Sy nk minta tolong. sy telah buat dropdown menu mengikut tutorial kak shida ni tapi menu tab saya tu terkeluar dari body blog. macam nk atur ya. kak shida blh tolong aturkan tak?

    ReplyDelete
  26. Akak kalau code untuk simple template bagi drop down menu cam mne?Sy cari code " ]]> " x jumpe pon..

    ReplyDelete
  27. terima kasih :) tp saya paste kat HTML/Javascript.

    ReplyDelete
  28. terima kasih. .kite punye jadi. .tq2 !

    ReplyDelete

Segala komen-komen yang telah disiarkan adalah tanggungjawab sepenuhnya ke atas penulis itu sendiri. Pemilik blog tidak akan bertanggungjawab jika berlaku sebarang permasalahan berkaitan dengan komen yang disiarkan. Mana-mana komen yang berbentuk iklan, mengandungi link/url yang mencurigakan, mengandungi kata-kata maki hamun yang tidak menyenangkan tidak akan disiarkan. Harap Maklum dan Terima Kasih.