Membuat menu Dropdown dengan box pencarian

Anda mungkin ingin menggata kotak pencarian judul blog Anda di halaman blog Anda dengan buatan Anda sendiri, seperti contoh di bawah ini:

Pembuatan menu dropdown ini, akan memberi caranya dengan box search blog menggunakan image buatan Anda. Dalam kotak pencarian blog tersebut menggunakan dua gambar ( 1. kotak image untuk mengetik alamat blog,  ke 2. image untuk tombol Penelusuran atau Search) , perhatikan gambar di atas, nantinya  kotak pencarian judul blog Anda akan seperti pada contoh. Baik, kita mulai berkeasi membuat  kotak pencarian judul blog buatan Anda sendiri.

•  Anda harus login ke Blogger terlebih dahulu

• Lalu klik Design/Rancangan

• Kemudian  klik tombol Edit HTML, sebelumnya klik terlebih dulu tombol " Expand Template Widget  ".

• Klik sekali lagi tombol Ctrl+F, masukkan code seperti  ]]></b:skin> pada kotaknya dan klik Next, lihat code tersebut yang diblok dengan warna hijau ]]></b:skin>.

Sekarang copy code HTML di bawah ini dan paste tepat di atas ]]></b:skin> :

/* Menu Horizontal Dropdown ----------------------------------------------- */ #menuwrapperpic{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguP9iIeA7daBvTJpRILp9ka9_tQkoOcVyA6Ld5FnUqYWpK82ocZxLNYnQ3gv7e2LYiHmSL-UtYGsvGKifjpYLMzJpa5zRtoe2On2ohGb3kVAcOjr64WWURlvuEuNaPit32-KgtnF7Gntg/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:#3434fa;border-right:1px solid #191919;padding:12px 10px 8px} #menubar a.trigger{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV0vXBnMzLpgDCAPHIuZIzB4d8u2g_VYRjqC8_cp-47CnL-xIcSiRmoqjtnAq6RMssQdtSaeeL5_ZT89yfHBQH0IKDJ1jnoqnSBhJEcWBm3V8GRiFthjWYRNuRl26AXFX0KTrdi-iK2MI/s1600/arrow_yellow.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:#ff0000;font-size:12px;font-weight:400;text-transform:none;font-family:Copperplate Gothic Light;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:#ff0000;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:#00ff00!important;text-decoration:none}

]]></b:skin>

Berikutnya cari code </header> dan copy code di bawah lalu paste tepat di atas code </header>
<div id='menuwrapper'>
<ul id='menubar'>
<li><a href='/'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOA0TkjcGWXYt5S1QvKp5bY4LBAYfsB2MNnzmB_ovff16tWt0gd31CICGvDqCCHDY0a3f3BtbCt7L-XAiIlct9yCuGX0RZAJQGQtzuPIH22cI5ImIdRHI6Idlrql30qiQZauyQvOA_pJc/s1600/home_yellow.png' style='padding:0px;'/></a></li>

<li><a class='trigger'>PAGE</a>
<ul>

<li><a href='http://gadgetbloganda.blogspot.com/p/kebiasaan-bulan-ramadhan-di-arab-saudi.html' target='new'>Kebiasaan Pada Bulan Ramadhan di Saudi</a></li>
<li class='hr'/>

<li><a href='http://gadgetbloganda.blogspot.com/p/cara-mudah-membuat-url-code-image.html' target='new'>Cara mudah Membuat URL Image</a></li>
<li class='hr'/>
<li><a href='http://gadgetbloganda.blogspot.com/p/membuat-sharing-button-tanpa-edit-html.html' target='new'>Add a Gadget/Sharing Button</a></li>

</ul>
</li>


<li><a class='trigger'>EFEK NEON</a>
<ul>
<li><a href='http://gadgetbloganda.blogspot.com/2012/07/membuat-teks-efek-neon.html' target='new'>Teks Efek Neon</a></li>
<li class='hr'/>
<li><a href='http://gadgetbloganda.blogspot.com/2012/07/membuat-teks-dengan-huruf.html' target='new'> Teks Gelombang</a></li>


<li><a href='http://gadgetbloganda.blogspot.com/2012/07/cara-membuat-teks-pelangi-rainbow.html' target='new'>Teks Pelangi</a></li>
<li class='hr'/>
<li><a href='http://gadgetbloganda.blogspot.com/2012/08/menggabungkan-teks-berkedip-menjadi.html' target='new'>Teks Berkedip dan Berjalan</a></li>
<li class='hr'/>
<li><a href='http://gadgetbloganda.blogspot.com/2012/08/blog-post.html' target='new'>Teks Dobel Sekaligus</a></li>


</ul>
</li>
<li><a href='#'>Judul</a></li>
<li><a class='trigger'>Judul</a>
<ul>
<li><a href='#'>Judul</a></li>
<li class='hr'/>
<li><a href='#'>Judul</a></li>
<li class='hr'/>
<li><a href='#'>Judul</a></li>

</ul>
</li>
<li><a class='trigger'>Judul</a>
<ul>
<li><a href='#'>Judul</a></li>
<li class='hr'/>
<li><a href='#'>Judul</a></li>
<li class='hr'/>
<li><a href='#'>Judul</a></li>
<li class='hr'/>
<li><a href='#'>Judul</a></li>
<li class='hr'/>
<li><a href='#'>Judul</a></li>
<li class='hr'/>
<li><a href='#'>Video Blogger</a></li>
<li class='hr'/>
<li><a href='#'>Judul</a></li>

</ul>
</li>

<li><a href=' #' target='new'> Judul </a></li>


<li><a class='trigger'>Judul</a>
<ul>
<li><a href='URLBlog/'>Judul</a></li>
<li class='hr'/>
<li><a href='URLBlog/'>Judul</a></li>
<li class='hr'/>
<li><a href='URLBlog/'>Judul</a></li>
<li class='hr'/>
<li><a href='URLBlog/'>Judul</a></li>
<li class='hr'/>
<li><a href='URLBlog/'>Judul</a></li>
<li class='hr'/>
<li><a href='URLBlog/'>Judul</a></li>
<li class='hr'/>
<li><a href='#'>Judul</a></li>


</ul>
</li>
</ul><div class='menusearch'>
<div style='float:right;padding:8px 8px 0 0;'>
<form action='http://gadgetbloganda.blogspot.com/search' method='get' target=''>
<input name='sitesearch' style='display:none;' value='http://gadgetbloganda.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:italic 12px Magneto;color:BLUE; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvprs4YKrr-aMXPF_6JuARDMV9HY_m-0x-Q87sU8EWcTIebKjGTjpOF7VMd9kiOdg9aBdurn599GuSfKBxuMo2j8gwbxyDF9sVj5o0r2o4LiNpnR_z9LPdkrh0SYwJd5eZpOWnAlBzC4to/s320/Snapshot_219.png) no-repeat;' type='text' value='Temukan di sini…...'/><input align='top' id='search-btn' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiRtxrAoMn7JzR4hdNUladMTVvlyjUNi49LpK5GT5TF3hCcpa95kGa_maL6gYSX6s7w0AEqNS6bbHER3XsJzJgMJ_Q0QTzjLOk1kNV92lied1ELD2lqnTtgNHQZuIh4htS37aFE7GBknbE/s52/Snapshot_217.png' type='image' value='TELUSURI'/>
</form></div></div></div></div>



Catatan:
Dari yang pertama di atas bahwa yang berwarna merah seperti (#) atau (URL Blog) ganti denga alamat Url Anda, dan yang berwarna kuning, ganti dengan judul masing-masing dari Url tersebut.
Sedangkan untuk merubah imagenya Anda harus membuat Url Image terlebih dulu, setelaj itu, sesuaikan ukuran kotak pencari dan kotak  tombol sebagai kota pencarian, setelah selasai semuanya, ganti Url ini https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvprs4YKrr-aMXPF_6JuARDMV9HY_m-0x-Q87sU8EWcTIebKjGTjpOF7VMd9kiOdg9aBdurn599GuSfKBxuMo2j8gwbxyDF9sVj5o0r2o4LiNpnR_z9LPdkrh0SYwJd5eZpOWnAlBzC4to/s320/Snapshot_219.png dengan Url image Anda tadi, sedangkan teks yang terletak di dalam kotak pencari seperti Temukan di sini…...' bisa Anda ganti dengan nama apapun terserah Anda begitu pun sebagai tombol Search seperti TELUSURI dapat Anda ganti dengan nama sendiri.
Pastikan dalam mengedit koreksi kembali dengan teliti seltelah seluruhnya sudah pasti, klik tombol PRATINJAU untuk memastikan apabila ada kesalahan, jika tidak ada masalah, klik SIMPAN TEMPLATE

Selesai, selamat mencoba semoga berhasil dan bermanfaat,  terima kasih,,, sampai pada artikel berikutnya........

1. Artikel
2. Cari code seperti  ]]></b:skin>
3. Cari code </header>