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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7ap3eceQfWDzAdse6uyNjVaxkSXTO8smVvWMDPPx9cS6d0tkObFGMQ-IExGS1q5VcER19Exur4PEeh3L9MIg1w2tUDpDlWdyaHEuc-D_1EwMVgLT6R8ThxGZk51cjqniilbLnsFASHKo/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 :)




Share
Tweet
Pin
Share
Tags : , ,

You May Also Like

38 comments

  1. Sheila Salim19 February 2013 at 15:18

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

    ReplyDelete
  2. hazwan hairy19 February 2013 at 15:25

    akan dicuba nnti..hehe

    ReplyDelete
  3. Nur Nainis19 February 2013 at 15:47

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

    ReplyDelete
  4. nuyui a.k.a miss YUI19 February 2013 at 16:15

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

    ReplyDelete
  5. ayut19 February 2013 at 16:22

    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
  6. Unknown19 February 2013 at 17:48

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

    ReplyDelete
  7. Miss N™19 February 2013 at 22:45

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

    ReplyDelete
  8. Anonymous19 February 2013 at 23:30

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

    ReplyDelete
  9. Nadia Johari20 February 2013 at 01:58

    ingatkan senang..sush gak erk..hehe

    ReplyDelete
  10. ME CTCT20 February 2013 at 02:09

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

    ReplyDelete
  11. Unknown20 February 2013 at 06:59

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

    ReplyDelete
  12. Mrs Velentine20 February 2013 at 09:48

    pening kak tengok kod..hahaha//

    ReplyDelete
  13. LiLy @ MaMaQiStInA20 February 2013 at 10:14

    Nice Sharing Shida..^^

    ReplyDelete
  14. fieda20 February 2013 at 15:37

    tq tuto ni shida..

    ReplyDelete
  15. IntaNBerliaN22 February 2013 at 01:45

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

    ReplyDelete
  16. mohd zuhri22 February 2013 at 09:13

    memang cari tuto ni selama ni

    ReplyDelete
  17. hana22 February 2013 at 19:09

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

    ReplyDelete
  18. caliph shuriken23 February 2013 at 00:49

    mmg best menu cmni sbb iras2 menu website ^^

    ReplyDelete
  19. Cikrosecute23 February 2013 at 09:57

    nice tuto...

    ReplyDelete
  20. Aina Areen25 February 2013 at 04:28

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

    ReplyDelete
  21. mohd zuhri25 February 2013 at 09:21

    tutoo ni menjadi!

    ReplyDelete
  22. Wanieys a.k.a IbuQalief25 February 2013 at 16:50

    tima kasih share tuto ni shida

    ReplyDelete
  23. Unknown19 April 2013 at 23:11

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

    ReplyDelete
  24. Unknown19 April 2013 at 23:13

    Xjumpa lah EXPAND WIDGET dlm template ..edit html

    ReplyDelete
  25. Unknown19 April 2013 at 23:13

    Xjumpa lah EXPAND WIDGET dlm template ..edit html

    ReplyDelete
  26. En.Ezzo28 May 2013 at 12:17

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

    ReplyDelete
  27. En.Ezzo28 May 2013 at 12:19

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

    ReplyDelete
  28. Shida Radzuan28 May 2013 at 17:21

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

    ReplyDelete
  29. Shida Radzuan28 May 2013 at 17:23

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

    ReplyDelete
  30. En.Ezzo4 June 2013 at 16:36

    @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
  31. Effa Nadia14 July 2013 at 20:09

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

    ReplyDelete
  32. Eymasu15 July 2013 at 07:00

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

    http://www.eymasushoppe.blogspot.com

    ReplyDelete
  33. Cik Fie5 August 2013 at 10:08

    nice tuto :)

    ReplyDelete
  34. Unknown27 September 2013 at 14:58

    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
  35. Anonymous27 October 2013 at 16:45

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

    ReplyDelete
  36. anys nadhilah28 October 2013 at 15:28

    jadi . maceh share :D

    ReplyDelete
  37. Sabby 🌹10 January 2014 at 00:04

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

    ReplyDelete
  38. Unknown7 January 2015 at 12:54

    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.