Cara Membuat Kotak Pencarian (Search Box) Responsive dengan CSS di Sidebar Blog

PADA kesempatan ini, meneruskan metode pembuatan kotak pencarian responsive seperti pada penjelasan artikel sebelumnya.

Tentu, tidak jauh berbeda fungsi dan manfaatnya dengan cara sebelumnya, namun perbedaannya pada teknik pembuatannya saja. Yang pasti tetap responsive, fast loading dan user friendly. So, mari kita coba bareng-bareng. Tips ini ane peroleh dari senior blog Cb.

Salam blogger!



CARA MEMBUAT KONTAK PENCARIAN DENGAN CSS
1. Berdo'a
2. Template > Customize > Advance > Add CSS
3. Masukkan kode di bawah ini:

#search-box {
position: relative;
width: 100%;
margin: -15px 0px -20px 0;
}

#search-form
{
height: 40px;
border: 1px solid #999;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #fff;
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: #4d90fe;
-webkit-border-radius: 0px 5px 5px 0px;
-moz-border-radius: 0px 5px 5px 0px;
border-radius: 0px 5px 5px 0px;
cursor: pointer;
}

3. Klik "Apply to Blog"

4. Back to Blogger

Catatan:
Bisa juga dengan cara: Template > Edit HTML > Copas kode di atas tepat di atas kode ]]</b:skin>lalu "Save Template".

5. Klik "Layout" > Add a Gadget > Edit HTML/Javascript

6. Copas kode di bawah ini di kolom "Content"

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

7. Save!

Demikian tips kali ini. Mungkin dari rekan-rekan mempunyai referensi lain? Silakan sampaikan pada kolom komentar.