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

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.
Comments
0 Comments

0 komentar:

Post a Comment

Disarankan berkomentar menggunakan Open ID. Komentar SPAM dan SPAMMY (menyertakan link hidup, jualan produk obat; nama blog) otomatis tidak akan muncul. Hindari pertanyaan OOT (Out off topics). Sebelum bertanya, Cari Dulu di Kotak Pencarian! Salam Hangat


From RP 1.999.000 RP 1.599.000 -20%
kembali ke atas