Cara Membuat Widget Search Box Responsive
Posted by
Seperti yang kita tahu Widget Search pada blog dapat memudahkan pengunjung dalam mencari suatu artikel dengan judul tertentu di blog kita.
Ada banyak berbagai macam jenis model kotak pencarian pada blog berikut salah satu model kotak pencarian yang dinamis dan stylish.
Tutorial Membuat Tombol Search Pada Blog
Buka dasboard blog - Tatak Letak - Add gadget HTML
Seperti pada gambar dibawah
Tambahkan kode berikut.
Tombol Search Blog
Ada banyak berbagai macam jenis model kotak pencarian pada blog berikut salah satu model kotak pencarian yang dinamis dan stylish.
Buka dasboard blog - Tatak Letak - Add gadget HTML
Seperti pada gambar dibawah
Tambahkan kode berikut.
Tombol Search Blog
<style>Search Here, Search dan Kode Warna Merah dapat anda ganti sesuai keinginan.
#abt-search-btn {
background: none repeat scroll 0 0 #359BED;
border: 0 none;
border-radius: 0 0 0 0;
color: #FFFFFF;
font-weight: 700;
padding: 10px 20px;
}
#abt-search-box {
background: none repeat scroll 0 0 #EEEEEE;
border: 0 none;
padding: 10px;
width: 160px;
}
</style>
<form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="abt-search-box" name="q" size="40" type="text" placeholder="Search Here"/>
<input id="abt-search-btn" value="Search" type="submit"/>
</form>
