Cara Memasang Menampilkan atau Membuat Kotak Pencarian pada template Simple Responsive di Sidebar Blog
Kotak Pencarian Simple Responsive
KOTAK Pencarian di Search Box adalah elemen yang 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. Copykan 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. Copykan 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 template Responsive sudah muncul di sidebar blog Anda
Kotak Pencarian Simple Responsive
KOTAK Pencarian di Search Box adalah elemen yang 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. Copykan 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. Copykan 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 template Responsive sudah muncul di sidebar blog Anda
EmoticonEmoticon