Membuat kotak pencarian responsive untuk blogger

Kotak pencarian ini memiliki fungsi yang sama dengan kotak pencarian bawaan blogger pada umumnya, yaitu sama-sama digunakan untuk mencari konten-konten yang ada di blog, namun beda style.

Walaupun sederhana tetapi kotak pencarian ini memiliki desain yang tidak membosankan dan cocok bagi anda yang menggunakan tema bawaan blogger versi lama semisal simple bold, awesome dan lainnya.

Untuk membuat kotak pencarian responsive ini caranya cukup yaitu dengan menambahkan kode HTML, CSS pada bagian sidebar atau bilah sisi blog.

Cara membuat kotak pencarian responsive

1. Login di blogger.com.
2. Klik Tata Letak, Tambahkan Gadget, berikutnya anda pilih HTML/Javascript.
3. Beri nama untuk gadget kotak pencarian yang akan anda buat di kolom judul atau boleh anda kosongkan saja.

4. Letakkan kode berikut ini di kolom input konten.

<style>
#search-box {
position: relative;
width: 100%;
margin: -15px 0px -20px 0;
}
#search-form
{
height: 40px;
border: 1px solid #cccccc;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #f5f5f5;
overflow: hidden;
}
#search-text
{
font-size: 14px;
color: #ddd;
border-width: 0;
background: transparent;
}
#search-box input[type="text"]
{
width: 90%;
padding: 11px 0 12px 1em;
color: #333;
outline: none;
}
#search-button {
position: absolute;
top: 0;
right: 0;
height: 42px;
width: 80px;
font-size: 14px;
color: #fff;
text-align: center;
line-height: 42px;
border-width: 0;
background-color: #33aaff;
-webkit-border-radius: 0px 5px 5px 0px;
-moz-border-radius: 0px 5px 5px 0px;
border-radius: 0px 5px 5px 0px;
cursor: pointer;
}
</style>
<div id='search-box'>
<form action='/search' id='search-form' method='get' target='_top'>
<input id='search-text' name='q' placeholder='Search here...' type='text'/>
<button id='search-button' type='submit'><span>Search</span></button>
</form>
</div>

5. Terakhir anda klik Simpan.

Demikianlah cara membuat kotak pencarian sederhana dan responsive, semoga bermanfaat.