Membuat Kotak Search Seperti Yahoo!

Membuat Kotak Search Seperti Yahoo! » The FIM Site kali ini akan sedikit berbagi info mengenai Membuat Menu Search Seperti Yahoo! Dengan kita membuat kotak search diblog maka kita sedikit membantu perkejaan orang dalam melakukan pencarian diblog. Oiya untuk demo bisa dilihat pada blog saya ini ya untuk tampilannya seperti apanya.

Untuk menerapkan diblog anda berikut adalah tutorialnya. Oiya 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/AVvXsEgahDjh8qHe-5quDWrh0InQP7gaBevmOaQFzUfslXMnMxSe4LwtIOXpwUWcVtsOMZ-sHUV0-qFWqF6I6dpQa7uh7O28QLKs7q3icYIlJ3etj317CfFg_UlMHnDHWVvaKtj8C21HCRNs7y2E/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/AVvXsEgGqRFSMQc0tr_gBiIOZJzFJe_hbKTJsM5x3kTng0MbowxXdCpCwTxt1hORkKCwtD57OOiQcAy2mBjCYRAfat2OYbnTOMnRhOWVdwIlfwV6AZEidTi85EgNakJ34LjjAup6K0hpV2MIAy6X/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 == "") {this.value = "";}' onfocus='if (this.value == "") {this.value = ""}' type='text' value=''/>
<input class='searchbutton' type='submit' value=''/>
</form></center>

Simpan