Simple Search Box Dengan Gambar Di Kiri Dan Kanan

Simple Search Box
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='http://1.bp.blogspot.com/-o8fjdffMPm8/Ud1W1DZ0efI/AAAAAAAAZYs/a5FKTv53o0c/s1600/button-search.png' title='Search!' type='image'/>
</div></form>
</div>
<div class='logosearch'>
<img alt='Google' height='28' src='http://3.bp.blogspot.com/-JBH7frcCZsQ/Ud1XAkLDQhI/AAAAAAAAZY0/dEhu6IsYUUI/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.

UPDATE:
Ada koreksi dari Akiaki Lungguh (terima kasih ki hehehe...), ternyata kodenya tadi tidak valid HTML5. Setelah saya 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 kode di atas (kodenya sudah saya perbaiki). 

You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser
Disqus Comments