Membuat Search Box di Blog atau Website

Critanya malam ini lagi insomnia nih broh...hehe. Daripada gak ada kerjaan, ane mau sharing aja cara membuat search box yang simpel tapi elegan juga gak berat beratin loading blog karena hanya menggunakan html dan sedikit css, pake image juga ding, tapi cuma gambar kaca pembesar. Contohnya bisa dilihat di widget blog ini, sebelah kanan atau kiri.

Contoh :

Langsung ke TKP bro...

• Login ke blogger.
• Pilih Template > Edit HTML, klik Proceed lalu centang Expand Widget Template
• Cari kode ]]</b:skin> lalu letakkan kode CSS berikut diatasnya. 
• Kode CSS (style) :

#pencarian {
width: 85%
background: #222222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrIT-qmqD0g5U_pkoZXesxWn31zVMwKYx135of8s48_YOtOsPh0wy0-mUR3vJojvnVND0chqiPJf5y45sJ7UzVd6CXmuARGgmmKtYwJGVIde6W0CDX5PVdHgAuH7wYOV-huNyaIITBBvxe/s0/search.png) 1% 50% no-repeat;
border: 1px solid #999;
color: #999;
border-radius: 5px;
padding: 10px 0 10px 20px;
margin:10px;
}

Keterangan : 
width = lebar kotak
#222222 = warna backgground
#999 = warna garis pinggir
#999 = warna teks

• Save Template lalu Close
• Pilih Tab Layout, lalu Add Gadget (letaknya sesuka hati aja)
• Pilih HTML/Javascript lalu pastekan kode HTML berikut :

<form id='kotak-pencarian' action='http://hanreev.blogspot.com/search?q=' method='get'>
<input id='pencarian' name='q' onblur='if(this.value == &quot;&quot;){this.value = &quot;Pencarian&quot;;}' onfocus='if(this.value == &quot;Pencarian&quot;){this.value = &quot;&quot;;}' value='Pencarian' type='text' />
</form>

• Save dan lihat hasilnya.

Keterangan :

http://hanreev.blogspot.com = URL blog (ganti dengan URL blog sobat)

Pencarian = Teks yang tampil di kotak pencarian (Ganti ketiganya sesuai kehendak sobat, misalnya: Search, Cari, dkk)