Cara Membuat Kotak Pencarian Simple Responsive

Cara Memasang, Menampilkan, atau Membuat Kotak Pencarian Simple Responsive di Sidebar Blog

KOTAK Pencarian (Search Box) adalah elemen sangat penting dalam sebuah blog atau situs web. Widget kotak penelusuran ini memudahkan pengunjung mencari informasi yang mereka perlukan, juga memudahkan admin untuk mencari posting untuk --misalnya-- membuat internal link dalam sebuah posting baru.

Kotak Pencarian responsive (mobile friendly) sangat bagus buat seo blog, apalagi dengan diberlakukannya Algoritma MobileGeddon.

Contoh Kotak Pencarian Simple Responsive ada di blog ini, yakni di sidebar kanan paling atas.

Cara Membuat Kotak Pencarian Simple Responsive
1. Layout > Add a Gadget > Pilih "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='Cari Tulisan di Sini' type='text'/><button class='serchg' type='submit'> GO </button><span style='clear: both;display:block'/></span></form></div>

Anda bisa memasang kode kotak pencarian reponsive di atas di dalam template. Caranya:
1. Copas kode berikut ini di atas kode ]]></b:skin>

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

2. Copas kode berikut ini di bawah kode <div id='sidebar'> atau yang mirip dengannya:

<div class='serching'><form action='/search?q='><input class='serch' name='q' placeholder='Cari...' title='Cari Tulisan di Sini' type='text'/><button class='serchg' type='submit'> GO </button><span style='clear: both;display:block'/></span></form></div>

3. Save template!

Kini Kotak Pencarian Simple Responsive sudah muncul di sidebar blog Anda. (http://testemplatecb.blogspot.com).*