Kode Kotak Pencarian Sederhana di Sidebar Blog

CARA memasang, menampilkan, atau membuat kotak pencarian (search box) simple di sidebar blog, seperti yang dipasang di blog ini, cukup dengan memasang dua kode: CSS & HTML.

Kotak pencarian wajib ditampilkan di blog atau situ website, guna memudahkan pengunjung mencari informasi yang dibutuhkan.

Pakar usability website di NN Group membahasnya secara detail tentang kegunaan (usability) kotak pencarian ini, berdasarkan hasil riset mereka.

Cara Memasang Kotak Pencarian Sederhana di Sidebar Blog

1. Template > Customize
2. Klik "Advance" > "Add CSS"
3. COPAS kode berikut ini di kolom yang tersedia:

KODE CSS:

.serching{margin-top:10px}.serching form{border:1px solid #ddd;-moz-border-radius:3px;-webkit-border-radius:3px;max-width:310px;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}

4. Klik "Apply to Blog"
5. Back to Blogger
6. Layout > Add a Gadget > HTML/JavaScript
7. COPAS kode berikut ini di kolom "Content". Judul kosongkan!

KODE HTML:

<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'/></form></div>

8. Save!

Kini kotak pencarian sederhana, simple, namun elegan, sudah terpasang di sidebar blog Anda. (http://www.komunikasipraktis.com/).*

» Thanks for reading: Kode Kotak Pencarian Sederhana di Sidebar Blog