Tutorial : Cara nak buat Drop Down Menu Bar / Tab Menu Drop Down | Dunia sebenar Shida Tutorial : Cara nak buat Drop Down Menu Bar / Tab Menu Drop Down

Klik Banner untuk lebih lanjut (iklan berbayar) nak tempah? (klik sini)


Tuesday, 19 February 2013

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

  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(http://3.bp.blogspot.com/-LzmPTNyR6po/TwETZufjSTI/AAAAAAAAATo/oisHmXUjmSY/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='http://1.bp.blogspot.com/-Yx-NuFKviSQ/TwETaPMdmfI/AAAAAAAAATs/fLZvwofZ8N0/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(http://1.bp.blogspot.com/-kmhya2YU7jE/Tv9JVye66xI/AAAAAAAAAP8/S0ZeuQ910Ow/s1600/field-bg.gif) no-repeat;' type='text' value='search me'/><input align='top' id='search-btn' src='http://4.bp.blogspot.com/-b9FTjjXAbp4/TwEo-YIwe-I/AAAAAAAAAU4/Du-VmpE9hPE/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 :)




38 Jari Ohsem:

Sheila Salim said...

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

hazwan hairy said...

akan dicuba nnti..hehe

Nurul Aini said...

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

nuyui a.k.a miss YUI said...

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

ayut said...

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

Remy hazza said...

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

Cik Nur said...

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

Sally Yatiey said...

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

Nadia Johari said...

ingatkan senang..sush gak erk..hehe

C.T.K said...

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

azizah :) said...

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

Mrs Velentine said...

pening kak tengok kod..hahaha//

LiLy @ MaMaQiStInA said...

Nice Sharing Shida..^^

fieda said...

tq tuto ni shida..

IntaNBerliaN said...

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

Mohd Zuhri said...

memang cari tuto ni selama ni

Hana Jalil said...

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

caliph shuriken said...

mmg best menu cmni sbb iras2 menu website ^^

Che Rosliza Che Mat said...

nice tuto...

Aina Areen said...

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

Mohd Zuhri said...

tutoo ni menjadi!

Wanieys a.k.a IbuQalief said...

tima kasih share tuto ni shida

eastmaell said...

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

eastmaell said...

Xjumpa lah EXPAND WIDGET dlm template ..edit html

eastmaell said...

Xjumpa lah EXPAND WIDGET dlm template ..edit html

En.Ezzo said...

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

En.Ezzo said...

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

Shida Radzuan said...

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

Shida Radzuan said...

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

En.Ezzo said...

@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??

Effa Nadia said...

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

Eyma su said...

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

http://www.eymasushoppe.blogspot.com

Cik Fie said...

nice tuto :)

Nasuha said...

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?

budaqnakal jahat said...

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

Nys Anis said...

jadi . maceh share :D

NurShabrina said...

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

suhafizes gallery said...

terima kasih. .kite punye jadi. .tq2 !