Cara Membuat Kotak Search Mirip Yahoo di Blog

Masih sejuk bngt nih angin d daerah ku, Nah mumpung masih seger dan semangat, pagi ini saya akan berbagi untuk semua sobat R-C Blog'S. Pada episode berbagi kali ini saya akan berbagi kotak search mirip yahoo untuk blog, udah kaya sinetron aja pake episode hehehehe.
Langsung aja deh buat yang mau tau caranya bikin kotak search mirip yahoo di blog, ikuti langkah-langkahnya di bawah.

Berikut Cara Membuat Kotak Search Mirip Yahoo di Blog:

Langkah ke 1

1. Loggin ke Blog

2. Pilih Template >> Edit HTML

4. Cari kode ]]></b:skin>

5. Letakkan kode di bawah ini di atas kode ]]></b:skin>

searchform {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAs2dArfROziZ9SjDWI8Z8aTIEs9WZugXPuV6rU9wswmSMNmHPrl1WddbB5qPxwgYuNMeeycvpgzJofP7J3-swshV3d4FdNlefOkPcVCoq-PRlJV24ek3VqyE96yIO7PAWsiBkkaHVGY5u/s1600/CarGam-search.png) no-repeat; width:550px;height:47px;

display: inline-block;zoom: 1; /* ie7 hack for display:inline-block */

*display: inline;border: solid 0px #ccc;padding: 0px;}

.searchform input {font: normal 12px Arial, Helvetica, sans-serif;padding:6px;}

.searchform .searchfield {background: #e5e5e5;width: 416px;outline: none;margin:5px 2px 0px 5px;;border-top:1px solid #888;border-left:1px solid #888;border-right:1px solid #ccc;border-bottom:1px solid #ccc;}

.searchform .searchbutton {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFjwpTswp39MKUTZ9b6BTDSpSAZgnwonpDEQTT5Vr2eJVl1VSR1vj3cbqWas49aDS1pafgUuHvaIqEe3RiaHhWcPNUNXSbTNUFjSB5HtcTk00JIrBzi_fPCjNghHOp-Qpmtw9qwIF2Fb5_/s1600/bg_pencarian_cargam.jpg) no-repeat;height: 28px; width: 104px;border:none;}

6. Simpan Template

Langkah ke 2

1. Masuk ke Tata Letak  >> Tambah Gadget

2. Pilih HTML/Java cript

3. Masukkan kode dibawah ini

<br/><center><form action=' /search' class='searchform' method='get'>

<input class='searchfield' id='q' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;&quot;;}' onfocus='if (this.value == &quot;&quot;) {this.value = &quot;&quot;}' type='text' value=''/>

<input class='searchbutton' type='submit' value=''/>

</form></center>

4. Simpan, dan lihat hasilnya...