Cara Menciptakan Widget Search Box Responsive

Sebagaimana yang kita tahu Widget Search pada blog sanggup memudahkan pengunjung dalam mencari suatu artikel dengan judul tertentu di blog kita.
Ada kaya bermacam 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
Sebagaimana pada gambar dibawah

Tambahkan arahan berikut.

Tombol Search Blog

<style>
#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>

Search Here, Search dan Kode Warna Merah sanggup anda mengganti sesuai keinginan.