Simple Search Box Dengan Gambar Di Kiri Dan Kanan

Anda bosen dengan search box di blog Anda? Mungkin mampu 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 mampu 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 aba-aba pembentuknya/HTML-nya ibarat 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/AVvXsEjKtB7oakpdXLwF-QD2zGH-5O3APjqSiYTuN8E2z2fAUzL91_i55mqTB_lsU-zaToWHSYwcvMpKoyYjF-glSj09FvHtBKoY5UlnQqw4Jkr0zy_h2GmPDsU2rwINWVzjnTGjS5uxRZ4HnZU/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/AVvXsEjNmK2E8_0vN0sKAMAL3_3DYUkohgb7Cs5ISfVEeKlIZjQRa3cycL-qmVpc8__R8X2d3t6vFLWrrAGJZsoJDPw3Q7iFaIlbj-aAwsza2UCYgU_GYbtx76NjNHnTQPu1fJcwWck5SRPg2rk/s1600/google-search.png' title='Google Search' width='50'/></div></div>

 

Perhatikan aba-aba yang aku marking di atas, itu yaitu gambar yang ada di sisi kanan input box (search button), mampu Anda ganti dengan gambar sendiri semoga sesuai dengan tema blog Anda, perhatikan tinggi/height dan lebar/width gambarnya. Dan aba-aba yang di-marking di bawahnya yaitu gambar yang ada di sisi kiri input box, mampu 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 aba-aba CSS di bawah ini dan simpan di atas aba-aba ]]></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 aba-aba width.

DEMO

Jika ingin menggunakan fungsi Google Search Custom pada search box-nya ibarat serch box blog Kompi Ajaib ini, silahkan buka kembali postingan aku perihal 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.

UPDATE:
Ada koreksi dari Akiaki Lungguh (terima kasih ki hehehe...), ternyata kodenya tadi tidak valid HTML5. Setelah aku perbaiki kodenya sekarang sudah valid HTML5, CSS3 dan lolos uji skor SEO. Bagi yang tadi sudah coba tapi ternyata tidak valid HTML5, silahkan perbaiki dengan aba-aba di atas (kodenya sudah aku perbaiki).