Membuat search engine pada navbar blog

Apa kabar sobat ..???

kesempatan kali ini saya coba mengotak atik cara membuat box pencarian ...banyak sih macam - macam box pencarian yang sangat berguna sekali untuk mencari suatu artikel,gambar atau pun video secara singkat pada suatu blog atau web...dah lama sekali saya ingin mencoba membuat boxsearch sejajar dan terletak di sebelah kanan pada laman statis seperti gambar di atas setelah mencari kesana kemari..hilir mudik...mengobok-ngobok kode html ampe sempet pusing 9 keliling akhir nya berbuah pepaya..eh salah,,berbuah hasil....he he he

Di blogger sebenar nya sudah tersedia box pencarian dari google..so ga ada salah nya kan kita mencoba variasi lain nya atau pun lain nya..seperti yang sobat lihat pada gambar di atas sedikit di modifikasi dengan menambahkan icon search nya padahal pertama nya masih polos berbentuk kotak doang...nah jika sobat berminat untuk mencoba nya lihat tahapan-tahapan nya di bawah ini :

• Log in dulu ke blogger
• klik Tata letak
• Edit HTML
• jangan lupa download dulu tamplate asli anda untuk mencegah hal-hal tak diinginkan
• cari kode ]]></b:skin>
• letak kan kode dibawah ini di atas kode ]]></b:skin>

---

---

/* search
===================== */
#search{width:210px;font-size:11px;float:right;margin:0;padding:0}
#searchform{overflow:hidden;display:inline;margin:0;padding:0}
#searchbox{background:#ddd;margin:0;padding:0}
#search input{background:transparent;color:#fff;float:left;font-size:12px;width:158px;border:1px solid #fff;font:normal 10px arial, verdana, Times New Roman;margin:7px 0 0 10px;padding:3px 7px}
#search .btn{width:auto;border:0;margin:7px 0 0;padding:0}

---

---

Kalau sudah ketemu kamu coba cari kode yang mirip seperti ini:

<div id='NavbarMenu'>

atau kalau gak ketemu juga kamu coba kode yang ini:

<div id='navigation'>

kalau sudah ketemu maka kode yang berwarna merah tersebut akan diakhiri dengan kode </div> letakkan kode dibawah ini tepat dibawah kode </div> tersebut:

---

---

<div id='search'>
<form action='http://eko-tipsntrick.blogspot.com/search' id='searchform' method='get' style='display:inline;'>
<input id='searchbox' maxlength='160' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Search...&quot;;}' onfocus='if (this.value == &quot;Search...&quot;) {this.value = &quot;&quot;}' type='text' value='Search...'/>
<input class='btn' name='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpku-VAmp1UuOf9JzcdJqrAtBLN2gALRpts0nPk52U01rhRBXLuP5HetyEKiBrUsSs2_HetaCbTqFGpA_vGgPMTvFiLWXeQgMZ29xU1x0nLCBK6u_W2hTKN9Avji682sU8spPzggzf1OTg/s1600/1zehw2f_th.jpg.png' type='image' value='Go'/>
</form>
</div>

---

---

lihat hasilnya,akan ada search engin pada navbar anda, selamat mencoba aja ya...