Bikin Kotak Pencarian / Search mirip Yahoo!

Kali ini akan sedikit berbagi info mengenai Membuat Menu Search Seperti Yahoo! Dengan kita membuat kotak pencarian atau search diblog maka kita sedikit membantu perkejaan orang dalam melakukan pencarian artikel diblog kita. Untuk demo bisa dilihat pada blog saya ini ya untuk tampilannya seperti apanya.

Untuk menerapkan diblog anda berikut adalah tutorialnya.  tutorial ini saya peroleh dari sahabat blogger saya yaitu caragampang.com.

• Loggin blog
• Template --> Edit HTML --> Lanjutkan
• Backup terlebih dahulu template anda
• Cari kode ]]></b:skin>
• Letakkan kode berikut ini sebelum kode ]]></b:skin>

searchform {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIL_Ab1BUB23FU1gu8v2z0h42j4-ij7G_u5eihLkhaj67yJZOgh49BXioU6__r6QDELsOKd-soWVIgWozIurM6lDGox98cm-SplBUuR_7j2Z-ba3sP1AdjxGVAsBCjvZjcCgd_KJFzz2s3/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/AVvXsEixJa-B6U3qFfWU3pgoIlPaCrNv8cxVsSWW1-h4Opqx3eu_2wJvY1S30uTA5zFVfgMPopfhsxMHXKQSaovGGX93q8YZzHT8N-mIhfQiAMb1xDKw6Lghi-oEbZX6l1OhpXjPAJqGTKXkweKi/s1600/bg_pencarian_cargam.jpg) no-repeat;height: 28px; width: 104px;border:none;}

• Simpan

Belum seleai sampai disitu. Untuk meletakkan kodenya seterh anda ingin diletakkan dimananya. Kali saya berikan pada tab elemen saja.

•  Setelah login
• Tata Letak --> Tambah Gadget
• Pilih HTML/Java cript
• 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>

• Simpan

Thanks for reading Bikin Kotak Pencarian / Search mirip Yahoo!