Memasang Widget Search Box Simple Responsive Terbaru

Memasang Widget Search Box Simple Responsive Terbaru - Elemen yang sangat penting dalam suatu blog atau website adalah kotak pencarian atau biasa di sebut dengan Search Box. Widget penelusuran ini memudahkan pengunjung dalam mencari sebuah informasi yang sedang di cari dan dibutuhkan, serta memudahkan admin untuk mencari posting artikel dalam membuat internal link di sebuah postingan artikel baru.

Dalam artikel kali ini, saya ingin membagikan cara untuk memasang widget search box simple responsive dalam blog anda. widget satu ini berbeda dengan widget lainnya, karena di kemas secara responsive sehingga sangat baik untuk seo blog.

Tanpa berpanjang lebar lagi berikut saya bagikan widget dibawah ini.
Baca Juga :  Cara Verifikasi Account Paypal dengan Bank Lokal

Memasang Widget Search Box Simple Responsive Terbaru

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}.serchingform 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. Copy 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. Copy 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. Simpan / Save Template

Demikian artikel mengenai Memasang Widget Search Box Simple Responsive Terbaru, semoga bermanfaat ya!

Tweet