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

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 :

dashboard >> template >> editHTML >> tick expand widget
cari kod ini >> ]]></b:skin>
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/AVvXsEiMVot5bNJOnlWofTYdc8J5l4ICRniKCoROFQX8_JKjE0g5eZ7ZXvo41bLl7oqgAUr5t_jr6WodwQL1I0PsMr0V2Qd8xlbHkJZ3i3h7M7rqQ2JwDO0bKrG9qoMu1KKUV6XhjW_hdAcxUGc/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/AVvXsEjRbrJSTVO-1mJZgzep6F3KhPIHuviDI0AyTaoAOF4193bd09llB8WIsG4BAt_EckKyRDBmbMcImGxci8oBVCMwc4ZsG0E6d1EmJrUFtcpMEevDHdppEu2dhqpVrJdxapUwi8z0j4MAcw0/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 :

cari pula kod ini >> </header> atau pun bagi yang pakai denim cari kod ini >> <div id='crosscol-wrapper'>
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/AVvXsEiJR5YWBWGSctsfl8YEQKmpFtvLXfE9t9Fk7gLXP-UgVAqcNjwjISXS2f4U6SE0ZEt3wQOt9CTAkxvu7GRid-H7yYu73EnQVD63-zbDH-C1wROB5fpai4dwW4iuZomP_6x6NEaLtTKw28w/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=='')this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value='';' style='width:170px;border:none;padding:4px 10px; font:italic 12px Georgia;color:#666; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKT7WEYLK7PTd2AzHfDD5zRo_ld2PjoO-Wqa8-js9WfqlMhuG_mRsS-AlD6dxJkiUam2tOnrwJCG6sxuLxBdob-1bvfyAv1gqt24qVo8nVaQUS2VasP-mtIurek-_27GsDukSStzeeGoY/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/AVvXsEj3w5R-8R5G9kJw-zhWqGOFdTVg41_YgB-G52qw_I_XhOmay7e_2uP3EjiWHSiFwsK-bYq89qHBe0BLouHHXPTwn38pkQAXUWWhhcfXPfsEOBV0yx9hB_8IvFFJGrmqupxUbTZTuNPn9c0/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. :)

Kredit By Shida

TERIMA KASIH SUDI BACA DAN KOMEN

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

No comments:

Blog Archive

Followers

Labels