Tutor membuat Menu Dropdown dan search Engine

Bismillahirrohmanirrokhim .. salam Untuk sobat Semua ..

Langsung saja menuju pokok pembahasannya ..
Kali ini saya akan memposting  tentang Tutor membuat Menu Dropdown yg dilengkapi dengan search Engine, sebenarnya tutor  dan Fungsi dari menu Dropdowwn ini  hampir sama dengan yg saya posting Kemarin .. silakan lihat di sini  Tutorial membuat navigasi dropdown menu, hanya bedanya menu dropdown ini di lengkapi dengan Search engine [kotak pencarian]. penasaran pingin lihat bentuk ikuti tutor dibawah ini untuk menaruh Menu Dropdown dan search Engine ini kke Blog sobat :

1. Masuk ke Blogger ==> Dasbor ==> pilih Template ==> Edit HTML ==> Lanjutkan dan Centang kotakan kecil di atasnya

2. Cari Kode ]]></b:skin> [untuk memudahkan pencarian silakan sobat Pencet F3 aatau Ctrl +F]

3. Bila sudah ketemu masukkan Kode di bawah ini , tepat di atas kode  ]]></b:skin>

Untuk melihat file Click Spoiler

/* Menu Horizontal Dropdown
----------------------------------------------- */
#menuwrapperpic{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioDC0GXXM8szXqdoyIouM7y2phl0DRHPkQYKqxpTOqPHpEv40_PZerznfrS4fYw2e-7-YZXFDae29AxrIq07sSbQ1vels7j34sVJCunaPHsyP5dQFmf8z0EPmReyFcJtbSU-DdS5wexWc/s1600/nav.png) repeat-x;width:960px;margin:0 auto;padding:0 auto}
#menuwrapper{width:960px;height:30px;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;text-shadow: 0px 1px 1px #000;color:#f2f1f1;border-right:1px solid #666;padding:9px 10px 8px}
#menubar a.trigger{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLhuMgbttR3hUscZnEgsOAk6SDOvJc_vZOsuSJJZcvwD1rUIDRxHPFEEaDIt1f90yhe67djqrRGIidCeWfqaowC5R_Wng7BIPFk7KAf4h16jCdn9kmoGkWX_GtLqAfVqBgpiYHAj63SuI/s1600/arrow_white.gif);background-repeat:no-repeat;background-position:right center;padding:9px 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}

4. Lanjut, sekarang cari Kode <div id='header-wrapper'>  atau <div class='header-outer'> [pilih salah satu yg ada di Template sobat] ... bila salah satu kode sudah di temukan .. letakkkan kode di bawah ini , tepat di bawah salah satu kode tersebut ..

Untuk melihat file Click Spoiler

<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li><a href='/'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS51JIjMuQDL1jNjaHjBIL48hdPY0DsGT3zvLgy-X9uLIjs-xOhbVIqSe5R1UJTuqv75hTRReZWKlNNH9fjzgwVxRM4VM4lfiIgxbd-P98vTl5Wl-T0BJ9qlvf2Jag2ZkYujT9R6Rmd0I/s1600/home_white.png' style='padding:0px;'/></a></li>
<li><a href='#'>About Us</a></li>
<li><a class='trigger' href='#'>Contact Us</a>
<ul>
<li><a href='#'>Goggle +</a></li>
<li class='hr'/>
<li><a href='#'>Contact on Facebook</a></li>
<li class='hr'/>
<li><a href='#'>Contact on Twitter</a></li>
</ul>
</li>
<li><a href='#'>Sport</a></li>
<li><a href='#'>Culture</a></li>
<li><a class='trigger' href='#'>Entertainment</a>
<ul>
<li><a href='#'>Music</a></li>
<li class='hr'/>
<li><a href='#'>Movie</a></li>
<li class='hr'/>
<li><a href='#'>Television</a></li>
</ul>
</li>
<li><a href='#'>Health</a></li>
<li><a class='trigger' href='#'>More</a>
<ul>
<li><a href='#'>Themes</a></li>
<li class='hr'/>
<li><a href='#'>Tutorial</a></li>
<li class='hr'/>
<li><a href='#'>Resource</a></li>
<li class='hr'/>
<li><a href='#'>Advertise</a></li>
<li class='hr'/>
<li><a href='#'>Javascript</a></li>
</ul>
</li>
</ul>
<div class='menusearch'>
<div style='float:right;padding:4px 8px 0 0;'>
<form action='http://www.google.com/search' method='get' target='_blank'>
<input name='sitesearch' style='display:none;' value='http://URL-blog.blogspot.com'/>
<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:12px Arial;color:#666; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgM7D1LqEdf8y1JdE60Og8c6AYtwv-dal-K08EoHb7_GlS9CtqoIpnCceX1nLvEFXIa32op7Y9IO4mKfYQRNV_9GjMWdfghImGUpbQLSNo7whQgleyDUGJq2JdlvpABEKNqxCKKthSv8Bk/s1600/field-bg.gif) no-repeat;' type='text' value='Search on this site...'/><input align='top' id='search-btn' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJVRqWKhxVV98JPeuGiacI5rHHMLwa4AMVJ5iW4s5LajJhSn-eC8VQ8CzAQ387g1uUx1GUPEb5EVD-RTpUQig_AOPjm2VJFN3StN5zyilROG_doa8AA7CLHj0c7L9ksYXxjBRszEtdoG8/s1600/bg_search.gif' type='image' value='Search'/>
</form>
</div>
</div>
<br class='clearit'/>
</div>
<div style='clear:both;'/>
</div>

Catatan : silakan edit Kode  diatas dengan daftar menu di Blog sobat
- untuk warna hijau ==> tempat Link sobat
- untuk warna merah ==> tempat menu sobat

Sumber : google

Semoga postingan ini memberi manfaat untuk Kita semua ..
Dan semoga Rahmat serta Hidayah-NYA selalu tercurah untuk kita semua .. Amin ..