Membuat Menu Dropdown Plus Kotak Pencarian

1. Login ke account Blogger terlebih dahulu

2. Masuk ke Dashboard, Template

3. Pilih Edit HTML, lalu ceklis "Expand Template Widget"

4. Cari kode ]]></b:skin> (tekan ctrl+f untuk mempermudah pencarian)

5. bila sudah, letakkan kode dibawah ini tepat diatas kode ]]></b:skin>

#menuwrapper{width:1100px;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:14px;font-weight:700;text-transform:uppercase;text-shadow: 0px 1px 1px #fff;color:#666666;border-right:0px solid #666;padding:9px 10px 8px}
#menubar li{float:left;position:static;width:auto}
#menubar li ul,#menubar ul li{width:170px}
#menubar ul li a{text-decoration:none;font-size:14px;font-weight:700;text-transform:uppercase;text-shadow: 0px 1px 1px #fff;color:#666666;border-right:1px solid #666;padding:9px 10px 8px}
#menubar li ul{z-index:100;position:absolute;display:none;background:#eeeeee;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:#eeeeee;color:#8d93a1}
#menubar li:hover ul,#menubar li.hvr ul{display:block}
#menubar li:hover ul a,#menubar li.hvr ul a{color:#666666;background-color:transparent;text-decoration:none}
#menubar li ul li.hr{border-bottom:0px solid #999999;border-top:1px solid #cccccc;display:block;font-size:1px;height:0;line-height:0;margin:4px 0}
#menubar ul a:hover{background-color:#eeeeee;!important;color:#4eabff!important;text-decoration:none}

6.Cari kode

<!--No header image -->
 <div id='header-inner'>
..........................................
..........................................
</b:includable>
</b:widget>
</b:section>
    </div>
    </div>

7.Letakkan Kode Berikut Tepat DI bawahnya

<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li><a href='http://pasuruanblogger.blogspot.com/'>Home</a></li>
<li><a href='http://pasuruanblogger.blogspot.com/2012/10/sitemap.html'>Sitemap</a></li>
<li><a class='trigger' href=' http://feeds.feedburner.com/PasuruanBlogger' target='_blank'>RSS FEED</a>
<ul>
<li><a href='http://pasuruanblogger.blogspot.com' target='_blank'>Mobile View</a></li>
<li class='hr'/>
<li><a href='http://pasuruanblogger.blogspot.com/search/label/*%20Unik%20Aneh'>unik Aneh</a></li>
<li class='hr'/>
<li><a href='http://pasuruanblogger.blogspot.com/search/label/Aneh%20Foto'>Foto Unik</a></li>
</ul>
</li>
<li><a href='https://www.facebook.com/pasuruanblogger' target='_blank'>FansPage</a></li>
<li><a href='http://www.Blogger.com/follow-blog.g?blogID=5513845872170493170' onclick='window.open(this.href,&apos;dmfollow&apos;,&apos;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=no,width=599,height=521&apos;);return false' style='text-align:center;font-weight:bold;text,decoration:none' title='Join this site / follow'>Join This Site</a></li>
<li><a class='trigger' href='http://pasuruanblogger.blogspot.com/2012/10/tutorial-blog.html'>Tutorial</a>
<ul>
<li><a href='http://pasuruanblogger.blogspot.com/search/label/Misteri%20Dunia'>Misteri</a></li>
<li class='hr'/>
<li><a href='http://pasuruanblogger.blogspot.com/search/label/Biografi%20Tokoh%20Dunia'>Biografi</a></li>
<li class='hr'/>
<li><a href='http://pasuruanblogger.blogspot.com/search/label/Video'>Video Unik</a></li>
</ul>
</li>
<li><a href='http://pasuruanblogger.blogspot.com/search/label/Pengetahuan%20Unik'>Ensiklopedia</a></li>
<li><a class='trigger' href='http://pasuruanblogger.blogspot.com/search/label/people'>Serba Serbi</a>
<ul>
<li><a href='http://risalahatiku46.blogspot.com/2012/04/kode-warna.html'>Kode Warna</a></li>
<li class='hr'/>
<li><a href='http://pasuruanblogger.blogspot.com/search/label/Sejarah%20Unik'>Sejarah</a></li>
<li class='hr'/>
<li><a href='http://pasuruanblogger.blogspot.com/search/label/Seksologi'>Seksiologi</a></li>
<li class='hr'/>
<li><a href='http://pasuruanblogger.blogspot.com/search/label/Sains'>Sains</a></li>
<li class='hr'/>
<li><a href='http://pasuruanblogger.blogspot.com/search/label/Kesehatan'>Kesehatan</a></li>
</ul>
</li>
</ul>
<div class='menusearch'>
<div style='float:right;padding:4px 8px 0 0;'>
<form action='/search' id='searchthis' method='get' style='display: inline;'>
<input name='sitesearch' style='display:none;' value='http://pasuruanblogger.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/AVvXsEi4K_UlY-bY1ivJyZ9DQ5q-LhkLffcxqVF9vRkSMglssG-9mXz61gQ30E13HckfBWH8Pb_vuuk_JLtuu4ojfZy7f4w9DM3fv98sh6GaxCx0yl-BCCeJxIABkbQkDRhGS622eMLTblRFSro/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/AVvXsEiliHbEVjXWVZEbOtuHAlBkeWpyrgSUaaZrRieOS8Be8idhC6t_aD5e2CWD1o54Onwz432G21pl5gIqmKDMmr3pm6SEvppx8t9M6GpJjeMtIOFTbAoAqoEklW8arLL9SlqNm9W4sWw0-xM/s1600/bg_search.gif' type='image' value='Search'/>
</form>
</div>
</div>
<br class='clearit'/>
</div>
<div style='clear:both;'/>
</div>

8.Maka Hasilnya Akan Seperti Ini
<!--No header image -->
 <div id='header-inner'>
..........................................
..........................................
</b:includable>
</b:widget>
</b:section>
    </div>
    </div>
<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li><a href='http://pasuruanblogger.blogspot.com/'>Home</a></li>
<li><a href='http://pasuruanblogger.blogspot.com/2012/10/sitemap.html'>Sitemap</a></li>
<li><a class='trigger' href=' http://feeds.feedburner.com/PasuruanBlogger' target='_blank'>RSS FEED</a>
<ul>
<li><a href='http://pasuruanblogger.blogspot.com' target='_blank'>Mobile View</a></li>
<li class='hr'/>
<li><a href='http://pasuruanblogger.blogspot.com/search/label/*%20Unik%20Aneh'>unik Aneh</a></li>
<li class='hr'/>
<li><a href='http://pasuruanblogger.blogspot.com/search/label/Aneh%20Foto'>Foto Unik</a></li>
</ul>
</li>
<li><a href='https://www.facebook.com/pasuruanblogger' target='_blank'>FansPage</a></li>
<li><a href='http://www.Blogger.com/follow-blog.g?blogID=5513845872170493170' onclick='window.open(this.href,&apos;dmfollow&apos;,&apos;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=no,width=599,height=521&apos;);return false' style='text-align:center;font-weight:bold;text,decoration:none' title='Join this site / follow'>Join This Site</a></li>
<li><a class='trigger' href='http://pasuruanblogger.blogspot.com/2012/10/tutorial-blog.html'>Tutorial</a>
<ul>
<li><a href='http://pasuruanblogger.blogspot.com/search/label/Misteri%20Dunia'>Misteri</a></li>
<li class='hr'/>
<li><a href='http://pasuruanblogger.blogspot.com/search/label/Biografi%20Tokoh%20Dunia'>Biografi</a></li>
<li class='hr'/>
<li><a href='http://pasuruanblogger.blogspot.com/search/label/Video'>Video Unik</a></li>
</ul>
</li>
<li><a href='http://pasuruanblogger.blogspot.com/search/label/Pengetahuan%20Unik'>Ensiklopedia</a></li>
<li><a class='trigger' href='http://pasuruanblogger.blogspot.com/search/label/people'>Serba Serbi</a>
<ul>
<li><a href='http://risalahatiku46.blogspot.com/2012/04/kode-warna.html'>Kode Warna</a></li>
<li class='hr'/>
<li><a href='http://pasuruanblogger.blogspot.com/search/label/Sejarah%20Unik'>Sejarah</a></li>
<li class='hr'/>
<li><a href='http://pasuruanblogger.blogspot.com/search/label/Seksologi'>Seksiologi</a></li>
<li class='hr'/>
<li><a href='http://pasuruanblogger.blogspot.com/search/label/Sains'>Sains</a></li>
<li class='hr'/>
<li><a href='http://pasuruanblogger.blogspot.com/search/label/Kesehatan'>Kesehatan</a></li>
</ul>
</li>
</ul>
<div class='menusearch'>
<div style='float:right;padding:4px 8px 0 0;'>
<form action='/search' id='searchthis' method='get' style='display: inline;'>
<input name='sitesearch' style='display:none;' value='http://pasuruanblogger.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/AVvXsEi4K_UlY-bY1ivJyZ9DQ5q-LhkLffcxqVF9vRkSMglssG-9mXz61gQ30E13HckfBWH8Pb_vuuk_JLtuu4ojfZy7f4w9DM3fv98sh6GaxCx0yl-BCCeJxIABkbQkDRhGS622eMLTblRFSro/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/AVvXsEiliHbEVjXWVZEbOtuHAlBkeWpyrgSUaaZrRieOS8Be8idhC6t_aD5e2CWD1o54Onwz432G21pl5gIqmKDMmr3pm6SEvppx8t9M6GpJjeMtIOFTbAoAqoEklW8arLL9SlqNm9W4sWw0-xM/s1600/bg_search.gif' type='image' value='Search'/>
</form>
</div>
</div>
<br class='clearit'/>
</div>
<div style='clear:both;'/>
</div>

9.Sesuaikan Menu dan isi link sesuai keinginan.jika selesai Pratinjau dulu dan simpan template.

Maaf Jika Tutorialnya Kurang Jelas Dan Tidak Dimengerti Karna Ini Sifatnya Hanya Untuk Dokumentasi pribadi

Membuat Menu Dropdown Plus Kotak Pencarian

Posted by: Risalahati Dedic Ahmad Updated at: 00:45