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

Diposting pada

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.

0 thoughts on “Cara Membuat Kotak Pencarian (Search Box) Responsive dengan CSS di Sidebar Blog

  1. Terima kasih artikelnya Min… saya rasa pembuatan kotak search ini dipakai pada templat bawaan blogger…kalau template hasil download biasanya sudah ada tersedia..
    Salam sukses selalu..

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan.