Cara Membuat Tombol Search Seperti Google

langsung aja nih kali ini saya akan share tentang tutorial blogger mengenai cara membuat tombol search seperti google , sebenernya sih udah banyak yang share buat tutorial ini , tapi apa salahnya kan ditulis ulang secara lengkap lagi itung itung buat dokumentasi oke lanjut aja ya ke tutorialnya.

simak baik baik ya script berikut : Copy kode css diberikut diatas kode ]]></b:skin>

#search {background: #fff;border-radius: 2px;}#search-form {color:gray;width:50%;padding:6px 70px 6px 10px;font:14px Arial;transition: all 0.2s linear 0s;margin:-10px 0 10px;border:1px solid #ccc;border-radius:2px;}.search-button,.search-button:hover{background-color:#4D90FE;width:60px;padding:2px 5px;margin:5px 0 0 -63px;top:4px;border-radius:0 2px 2px 0;font-size:13px;cursor:pointer;border:none;position:relative;}#search-form:hover{border:1px solid #aaa}#search-form:focus{border:1px solid #4D90FE;outline:none;color:black;}

Kemudian silahkan copy kode HTML dibawah ini dan taruh kodenya diwidget atau dimana anda ingin menampikannya :

<div id='search'>
<form id='searchform' action='/search' method='get' target='_blank'>
<input id='search-form' 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 ...'/>
<button type='submit' class='search-button' title='Search'><img alt='search button' height='21' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigXzFA9cq5lOWJPKY0qY1879hf234TAKKwaz4IM9_k6KVT5ekpEsWOOodspUlf8YINMcGHAuGVLdXptJDI1QWmCx3suJu4cAohlB59fibWFgs4XwTnLltSqYp6DSPpRce_N5IygQloXKCZ/s1600/search.png' title='Search' width='21'/>
</button>
</form>
</div>

Nah ini hanya dari segi tampilannya saja. jika anda ingin menambahkan dengan Fungsi Custom Google Search bisa saja, tapi lanjut nanti lain kali ya agan-agan semua hehehe.