Simple Search Box Dengan Gambar Di Kiri Dan Kanan

Anda bosen dengan search box di blog Anda? Mungkin bisa Anda coba dengan search box yang satu ini. Search box ini menambahkan gambar di kiri dan kanan input box sehingga penampilannya lebih gimana gitu...hehehe...

Gambar di kiri dan kanan input box bisa Anda rubah dengan gambr-gambar Anda sendiri. Misalnya yang di kiri dengan logo blog Anda dan yang sisi kanan dengan icon search Anda sendiri.

Bagaimana tertarik untuk mencobanya? Silahkan pelajari dari kode-kode di bawah ini.

Untuk kode pembentuknya/HTML-nya seperti di bawah ini

<div style='float:right;padding:0 6px;margin-bottom:-3px;margin-right:-3px;overflow:hidden'>

<div style='float:right;padding:4px 2px 1px 0;'>

<form action='/search' id='cse-search-box' method='get' target='_blank'>

<div>

<input class='searchfield' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;' type='text' value='Search here...'/>

<input alt='search' class='searchbutton' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizllqkBFhYpF5t-Ln75nxdIMmOTcBa8SdyKYEp34_GVmHDJmDhcKXHePQsfMdQ8RQRPsKyCVNq0FFrpylcPbtPBY1yPJfx5wxkn2FezZK6y1j1cFjLtrHQHBo2SoNWzh8o29YnflGOFes/s1600/button-search.png' title='Search!' type='image'/>

</div></form>

</div>

<div class='logosearch'>

<img alt='Google' height='28' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkJCAjj3mXzmSnmnIjusxA0k6zKQL0srWf71E-BWHpl_uxaqveFGiJwc1cNL0WtncZ2Oj2LmUUSliH4qVXH5VbU1kc9u8GAyXOYUMYn9J7lfwwdpT0iHqNj0UiyXfVD261P8y5C2Z-q44/s1600/google-search.png' title='Google Search' width='50'/></div></div>

Perhatikan kode yang saya marking di atas, itu adalah gambar yang ada di sisi kanan input box (search button), bisa Anda ganti dengan gambar sendiri agar sesuai dengan tema blog Anda, perhatikan tinggi/height dan lebar/width gambarnya. Dan kode yang di-marking di bawahnya adalah gambar yang ada di sisi kiri input box, bisa Anda ganti dengan gambar sendiri misalnya logo blog dengan background transparant dan dimensi 50px x 28px.

Dan untuk mengatur lebar input box / searchfield silahkan tambahkan kode CSS di bawah ini dan simpan di atas kode ]]></b:skin>

.searchfield{width:150px;font:normal 11px Tahoma,Verdana,Arial,Sans-Serif;color:#555}
.logosearch{background:none;height:28px;width:50px;float:right;padding:3px 6px 0 0;}
.searchbutton{border:none;margin:0;padding:0;height:21px;width:50px;cursor:pointer;vertical-align:top}

Untuk menentukan lebar input boxnya silahkan atur angka pada kode width.

Jika ingin menggunakan fungsi Google Search Custom pada search box-nya seperti serch box blog Kompi Ajaib ini, silahkan buka kembali postingan saya tentang cara menambahkan fungsi Google Search Custom pada search box DI SINI.

Demikian cara membuat simple Search Box dengan gambar di kiri dan kanan ini semoga dapat dimengerti dan bermanfaat.