Cara Membuat Search Box Seperti Search Box Google

Cara Membuat Search Box Seperti Search Box Google - Assalamualaikum Wr Wb. Halo Sobat Siang Siang gini enaknya Ngapain ya ?? o,O Tutorial Ini Sedang Saya baca Di Kompi Ajaib Lalu Saya Post.

Dengan search Box ini pengunjung yang ingin mencari kata tertentu di dalam artikel di blog kita tinggal memasukkan key word dan semua artikel yang mengandung kata tersebut akan muncul sebagai search result. Alamat Blog dan lebar search Box bisa diganti sesuai kebutuhan.

Cara Membuat Search Box Seperti Search Box Google

Simpan CSS Dibawah Ini Diatas Kode ~~]]></b:skin>~~ Atau ~~</style>~~

#search {background: #fff;border-radius: 2px;}
#search-form {color:gray;width:60%;padding:6px 70px 6px 10px;font:14px Arial;transition: all 0.2s linear 0s;margin:-10px 0 10px;border:1px solid #AAAAAA;border-radius:2px;}
.search-button,.search-button:hover{background-color:#4D90FE;border:1px solid #0955d3;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;}

agar Search Box Tersebut Jadi Responsive ,, Ganti Ukuran Widht atau Warna Biru diatas

Lalu Copy Kode Dibawah Ini Di HTML Javascript Sobat ,, Di TATA LETAK

<div id='search'>
<form id='searchform' action='/search' method='get' target='_blank'>
<input id='search-form' name='q' onblur='if(this.value=='')this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=''' type='text' value='Cari Disini....'/>
<button type='submit' class='search-button' title='Search'><img alt='search button' height='21' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhimNxXMQ8QQczQobkxFl3GBCs7HFCPEeC71vgVtQgQW3HIsmpPSl7PaSesLmVs03eJKI2FoxZ_oII6YdW8mSW6JNdysqIZbhsPN7OQNU4vE0ECqYGDk9mTEb0BV37KAVUhewkvmyjFyoGp/s1600/search.png' title='Search' width='21'/>
</button>
</form>
</div>

Simpan

DEMO

Artikel Yang Mungkin Anda cari :

Template Pure Cyan Impossible

Demikian Post Cara Membuat Search Box Seperti Search Box Google Saya Hari Ini Semoga bermanfaat Bagi Kita semua ,, Wassalamualaikum Wr Wb..

Sumber

Alexander Akbar: Cara Membuat Search Box Seperti Search Box Google