Cara Membuat Kotak Pencarian (Search Box) Responsive 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:
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”
Catatan:
Bisa juga dengan cara: Template > Edit HTML > Copas kode di atas tepat di atas kode ]]</b:skin>lalu “Save Template”.
<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>
inspiratif sekali