Cara Manual Membuat Kotak Pencarian Dengan JavaScript Di Blog

Sigli Net- Pada kesempatan kali ini saya akan berbagi cara manual membuat kotak pencarian dengan javascript di blog. Kenapa saya tulis judul di atas dengan kata manual, karena banyak template yang sudah saya pakai dan saya uji coba ternyata jika kita memasang kotak pencarian yang sudah disediakan tidak work atau tidak tampil di blog!

Salah satu widget yang paling penting dan harus ada di blog adalah kotak pencarian. Dengan adanya kotak pencarian di blog, pengunjung blog tidak akan susah lagi mencari artikel yang mereka inginkan, cara kerjanya yaitu dengan memasukkan beberapa kata kunci di kolom kotak pencarian dan pengunjung akan langsung menemukan artikel yang mereka inginkan!

Berikut Cara Manual Membuat Kotak Pencarian Dengan JavaScript Di Blog:
1. Login ke Blogger
2. Klik menu Tata Letak
3. Klik Tambahkan Gadget
3. Pilih HTML/Java script
4. Masukkan Script berikut:

<form action="http://siglinet.blogspot.com//search"
method="get"> <input class="textinput" name="q" size="23" type="text"/> <input value="search" class="buttonsubmit" name="submit" type="submit"/></form>

NB: Jangan lupa ganti tulisan warna merah dengan url blog anda dan tulisan warna kuning itu adalah ukuran korak pencarian yang bisa di sesuaikan sendiri!

Penampakan

Atau ini!

<span style='float:right;'>
<style type="text/css"> #a-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigBgk5TC22bxCEH6XU8EGKN9u3tppH_w7AbWPRlRQbotmbEEnAobunVfgUcYJvVyjRUcQY0MpWSWqcn5alWpYeGfGzT3wIQrhxG6QDOv7dSWIF1MSLGK1jWau8bexiMMC_R_ryGSYxIok5/s1600/search.box.png) no-repeat scroll center center transparent;width:300px;height:35px;disaply:block;} form#a-searchform{display: block;padding: 10px 12px;margin:0;} form#a-searchform #a{padding: 0px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#a-searchform #abutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <div id="a-searchbox"><form id="a-searchform" action="/search" method="get"> <input type="text" id="a" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/> <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="abutton" /> </form></div>
</span>