Widget Search Box Keren untuk Blog

Widget search box untuk membantu pengunjung menemukan apa yang mereka cari pada blog kita. Dan tentunya ini sangat berguna. Selain itu 99,99% para blogger memasang widget Search box pada blog mereka.

Langsung aja gan :
Cara memasang widget search box di blogger
Login ke Blogger > Edit HTML > Add Element baru > HTML atau Javascript
Copy salah satu kode dari 6 widget search box keren di bawah ini dan paste pada element baru tadi :

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlY7tqazI2TJLF3j3YElv1BMUUQ-8rjGuJ9cSm19Dlq2xHb8Jv6BHVifQe3ADNHmOv46Y6NCsRPbNUm0SMkdFPKL5cc2wzJGJinIenr7m5h9RGEfMwV1nkoqMrWJuLC8SeuZbsoIhfV2v8/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}
form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
<input type="text" id="s" 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="sbutton" />
</form>
</div>

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidI0NFgwaNRHQ2xBVP3PPK9XUxQVNu5VhQ7xGSW4QedXVlk2dOjOQmMTQ-U8ZQ0cws-P6irHLb2_lBNMDk4cw7kVoIytuUKnDlz68OObOriUIGxmdvDZLCLhyGH8Aumug-MKyVPL_Je1dg/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}
form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
<input type="text" id="s" 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="sbutton" />
</form>
</div>

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQoDnT3qOftHWTrk0nTLOpyEFnSdtf_tpj_tlD078XcUlAM6LvjYRfBm2tX6iUErZei9GTl6pP7Yiru7iUj8pK2W1ZQo0u-JKImwhuklRfiX3-dhK5eFL_M3B5_eaNrrgjILstFvmQizNU/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}
form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
<input type="text" id="s" 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="sbutton" />
</form>
</div>

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6DgYwO5H2CZuXZxI1VTBPvlxqM5h5f3NvPhOSU_2gswvIhMp_kKBXS9MNCOyQTaNUh3jD191K9zOJ3Y4wjG92LwsA9CzgGAuJYElD2_U0INNhOFYAD3MmJQGcGs7IVYzEaYr8h_VYbvDj/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 12px;margin:0;}
form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value=""/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgY9ueLJe1fZBpBL1t1AAE7Q8Pmf8eNcnq2wkCMzLiv2rHpd0qE22EKuI35yvrQmoCSMz5dpdnyZ-BHZf9M8iZ05yv0bvOzFtNkJbRV1Ax_ygO1WnBh8Atj9RaRjBPd1ecuXdX6or5UG1VC/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 12px;margin:0;}
form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value=""/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLU7Q6U4JsCyHjbhyphenhyphenQ8EtF3erE5aiXrroUnOtfC3hNt9KNHbEkNLO4I2osaqqb8fbaMHxaNFJpvJiQHDzd9c8iViZawgzn4aHFGQym0cxRdefhyphenhyphen1YqzoNzyeRau5EfvBgBksN045LqwvdT/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 12px;margin:0;}
form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value=""/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

Silahkan sesuaikan tampilan widget tersebut dengan tampilan blog agan, kemudian pilih simpan.
Selamat mencoba, semoga berhasil !!