Membuat Form Pencarian Responsive

Fitur pencarian memang penting bagi sebuah situs, karena ini sangat berperan untuk memudahkan pengunjung menemukan artikel yang dicari.

Namun untuk halaman situs yang sekarang sudah responsive, maka form pencarian juga jangan kalah responsive-nya dong... nah untuk membuat kotak pencarian responsive gunakan script berikut :

<style>
.serching{
margin:1px 10px 10px 0;
width:100%;
}
.serching form{
border:1px solid #ddd;
-moz-border-radius:3px;
-webkit-border-radius:3px;
font-size:14px
}
.serching form input{
display:block!important;
margin:0;
border:0;
padding:5px 0;
outline:0;
height:20px;
line-height:20px;
font-size:13px;
border-radius:0!important
}
.serch{
float:left;
width:85%!important;
text-indent:10px
}
.serchg{
float:right;
width:15%!important;
height:30px!important;
padding:0!important;
background:#010f62; // warna background tombol cari
color:#fff; // warna font tombol cari
border:0!important;
font-size:12px!important;
cursor: pointer;
}
.serchg:hover { // saat di hover
background: #ac04c5; // warna tombol saat di hover
}
</style>
<div class="serching">
<form action="/search?q=">
<input class="serch" name="q" placeholder="Cari..." title="Cari apa aja" type="text" />
<button class="serchg" type="submit"> GO </button><span style="clear: both; display: block;"></span>
</form>
</div>

Untuk menerapkan kode diatas bisa dengan menambahkan Gadget di Menu Tata Letak, caranya Tambahkan Html / Javascript, lalu copy semua script diatas.

Atau bisa juga menambahkan di elemen di template blog anda.

* Pastikan template agan sudah ada jQuery nya, kalo belum tambahkan sendiri yah..