Kode Kotak Pencarian Simple, Responsive, Fast Loading

Cara Memasang atau Membuat Kode Kotak Pencarian (Search Box) yang Simple, Responsive, dan Fast Loading di Sidebar Blog. Demonya di blog ini.

1. Layout > Add a Gadget > HTML Javascript
2. Judul widget kosongkan!
3. Copas kode berikut ini di kolom content:

<style>
.serching{margin:1px 10px 10px 0;width:100%;}.serching form{border:1px solid #ddd;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:14px}.serching form input{display:block!important;margin:0;border:0;padding:5px 0;outline:0;height:20px;line-height:20px;font-size:13px;border-radius:0!important}.serch{float:left;width:85%!important;text-indent:10px}.serchg{float:right;width:15%!important;height:30px!important;padding:0!important;background:gray;color:#fff;border:0!important;font-size:12px!important}
</style>
<div class='serching'><form action='/search?q='><input class='serch' name='q' placeholder='Cari...' title='Click the form, then type your keyword, then hit enter' type='text'/><button class='serchg' type='submit'> GO </button><span style='clear: both;display:block'/></span></form></div>

4. Save!

Kotak Pencarian Simple, Responsive, Fast Loading sudah muncul di Sidebar Blog Anda.*