Cara Membuat Kotak Penelusuran Responsive di Blog

Dari dulu blog yang sedang teman-teman baca ini selalu menggunakan google custom search untuk widget kotak penelusurannya. Selain praktis, dengan menggunakan google custom search kita juga dapat menghasilkan uang karena ada iklan di dalamnya.

Sayangnya beberapa waktu yang lalu saya mengalami kendala dengan kotak pencarian tersebut, dimana bentuknya tidak sesuai dengan yang saya inginkan. Bentuk kotak penelusurannya terlalu besar untuk ukuran blog saya dan kurang balance dengan desain blog.

Akhirnya saya putuskan untuk tidak menggunakan google custom search lagi, dan saya beralih menggunakan desain manual yang bukan punya google lagi.

Kotak penelusuran (search box) di blog saya

Bagi teman-teman yang ingin memiliki kotak pencarian seperti milik saya di atas itu...silahkan bisa mengkopi kode HTML yang saya sediakan. Langkah-lanhkahnya cukup mudah..

• Pertama login ke blogger
• Kemudian klik tata letak, kemudian tambahkan gadget di tempat yang diinginkan
• Lalu pilih HTML/javascript
• Kemudian kopikan kode HTML/javascript di bawah ini

<style>
#search-box {position: relative;width: 100%;margin: 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: #1a7db7;
-webkit-border-radius: 0px 5px 5px 0px;
-moz-border-radius: 0px 5px 5px 0px;
border-radius: 0px 5px 5px 0px;
cursor: pointer;}
</style>
<div id='search-box'>
<form action='/search' id='search-form' method='get' target='_top'>
<input id='search-text' name='q' placeholder='Cari Artikel Disini...' type='text'/>
<button id='search-button' type='submit'><span>Search</span></button>
</form>
</div>

Selesai, jangan lupa di save agar perubahannya muncul di blog.
background-color: #1a7db7; adalah warna tombol search. jika teman-teman ingin merubah warnanya silahkan ganti kode warna #1a7db7 dengan kode warna yang lain.
Cari Artikel Disini… : Kata-kata dalam kolom pencarian, dapat diubah sesuai keinginan.