Nulisku Tips Blog 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.
3 Likes

Author: admin

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

3 Comment

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

Nulisku We would like to show you notifications for the latest news and updates.
Dismiss
Allow Notifications