Membuat Kotak Pencarian Responsive di Sidebar Blog

Membuat Kotak Pencarian Responsive di Sidebar Blog

Cara Membuat Kotak Pencarian (Search Box) atau Tombol Cari (Search Button) Responsive di Sidebar Blog

 Kotak Pencarian Responsive
KOTAK Pencarian  wajib ada di situs web atau blog. Gunanya untuk memudahkan pengunjung mencari informasi yang mereka butuhkan.

Kotak pencarian juga sangat dibutuhkan blogger untuk menemukan posting yang, misalnya, akan dijadilan internal link di sebuah posting baru.

Berikut ini cara membuat kotak pencarian responsif (mobile friendly), fleksibel, dan fast loading di sidebar blog. Contohnya ada di sidebar blog CB ini.

1. Template > Customize > Advance > Add CSS
2. 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!

Kini Kotak Pencarian Responsive sudah muncul di Sidebar Blog Anda. Good Luck! (http://contohblognih.blogspot.com/).*

Labels: Desain Blog

Related Posts

10 Komentar untuk "Membuat Kotak Pencarian Responsive di Sidebar Blog"

kok pas di pasang menu searchnya jadi separuh mohon pencerahannya

iya gan. jadinya hanya separuh. cek offinx.blogspot.com

Coba tambahkan kode
di atas dan di bawah kode no. 6

kode < br / > (dirapatkan penulisannya)

coba tambahkan kode < br / > (dirapatkan) di atas dan di bawah kode no. 6

gan ko jadi ada dua kotak pencariannya..?

OK kawan ini sudah berhasil saya terapkan di blog. Terima kasih

Yup, sudah saya coba di blog saya. Terimakasih.

kode no 6 itu yang mana kang?

1. Komentar spam, menyertakan Link Aktif dan Alamat Blog tidak akan muncul.
2. Tidak semua pertanyaan sempat atau bisa dijawab.
3. Bagi yang mau tanya, sebelum bertanya, silakan cari dulu di Kotak Pencarian di Sidebar.
Thanks for visiting and the comment :)

Contact Form

Name

Email *

Message *