Simple Search Box Dengan Gambar Di Kiri Dan Kanan

Anda bosen dengan search box di blog Anda? Mungkin sanggup 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 sanggup 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 isyarat 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/AVvXsEjfGCD5qGClbU9dxkwUNXhTbjGtpTxPEjihB0J4XMunJT1SkOKBHxl4QNZAx4MNsE0Jc-vnZHHB5OeKJjPk-xR1r1ul1ScsnulY5wxM22RQ9YGgJ2IVNAjN50y-XjJLXGRdBZsqOjifBNQ/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/AVvXsEhYpEOZaoz67myPo3bVs1uFeqvmwiRecIFdbsPHzLnhNlOJOfBCwnA1rJQy2pwo4YWG7H6GGddIA0LdjozvTXU0vao02htEgH0pCp4CRvpu-mJOqQPG015OW02pwjjvQy5qtiyB1-YRmaw/s1600/google-search.png' title='Google Search' width='50'/></div></div>

Perhatikan isyarat yang aku marking di atas, itu ialah gambar yang ada di sisi kanan input box (search button), sanggup Anda ganti dengan gambar sendiri semoga sesuai dengan tema blog Anda, perhatikan tinggi/height dan lebar/width gambarnya. Dan isyarat yang di-marking di bawahnya ialah gambar yang ada di sisi kiri input box, sanggup Anda ganti dengan gambar sendiri contohnya logo blog dengan background transparant dan dimensi 50px x 28px.

Dan untuk mengatur lebar input box / searchfield silahkan tambahkan isyarat CSS di bawah ini dan simpan di atas isyarat ]]></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 memilih lebar input boxnya silahkan atur angka pada isyarat width.

DEMO

Jika ingin memakai 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 menciptakan simple Search Box dengan gambar di kiri dan kanan ini semoga sanggup dimengerti dan bermanfaat.

UPDATE:

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

Sumber https://www.kompiajaib.com/

Share this post