5 Widget Kotak Pencarian yang Keren

Berikut ini penulis share-kan beberapa script untuk widget atau sidebar atau gadget blogger yang memiliki tampilan cantik dan bisa Anda pasang pada blog Anda. Cara pemasangannya yaitu sebagai berikut:

1.) Login ke akun blogger Anda Disini
2.) Masuk ke menu “Layout/Tata Letak” 
3.) Klik “Add a Gadget/Tambah Gadget”
4.) Pilih yang fitur "HTML-JAVASCRIPT" 
5.) Klik ikon biru “+” 
6.) Copy salah satu kode kotak pencarian di bawah ini yang Anda suka 
7.) Paste di “Konten” HTLM-JavaScript 
8.) Biarkan “Judul/Title” di kosongkan saja 
9.) Klik tombol “Simpan/Save”

---

Style 1 – Box Orange

<style type="text/css"> 
#exe-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxKs2uyi2JFfiqeYGNH3gCzXMYFWCCphMrGyRyvN9aq3joztpReDRESNYMt8ryi0mL84vyXktdjP49qb1GJhAdRI1tHDuBerLukEcR2_SweyHAyBVeX9oLt-h_BZ16tR7wGHMb_8MuXQ/s1600/Yellow-Search-Engine.png) no-repeat scroll center center transparent;width:310px;height:100px;disaply:block;} 
form#exe-searchform{display: block;padding-top:51px; padding-left:30px;;margin:0;} 
form#exe-searchform #s{padding-top:3px; padding-left:1px; width: 208px; font-size:14px; vertical-align:top; border:none; background:transparent;} 
form#exe-searchform #sbutton{padding-top:10px; padding-right:25px; height:15px; width:15x; border:none; background:transparent;} 
</style> 
<div id="exe-searchbox"> 
<form id="exe-searchform" action="/search" method="get"> 
<input type="text" id="s" name="q" value="Search Here..." onfocus='if (this.value == "Search Here...") 
{this.value = ""}' onblur='if (this.value == "") {this.value = "Search Here...";}'/> 
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" /> 
</form> 
</div>

Style 2 – Box Hitam

<style type="text/css"> 
#exe-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr-UEIQqajGPPwT5xNoruFLrSRd3u5cF6enZ-Qh1KbJ6PjstUGyQx20XXrEeR2LG2Qb_pfT8CC-zj8q_EiVbI_kUC3_pfVm7FcJkwIr-ulMLAUn9aXhKu_kcVr_OsVdMj6_AzS9Je7ng/s1600/Black-Search-Engine.png) no-repeat scroll center center transparent;width:310px;height:100px;disaply:block;} 
form#exe-searchform{display: block;padding-top:51px; padding-left:30px;;margin:0;} 
form#exe-searchform #s{padding-top:3px; padding-left:1px; width: 208px; font-size:14px; vertical-align:top; border:none; background:transparent;} 
form#exe-searchform #sbutton{padding-top:10px; padding-right:25px; height:15px; width:15x; border:none; background:transparent;} 
</style> 
<div id="exe-searchbox"> 
<form id="exe-searchform" action="/search" method="get"> 
<input type="text" id="s" name="q" value="Search Here..." onfocus='if (this.value == "Search Here...") 
{this.value = ""}' onblur='if (this.value == "") {this.value = "Search Here...";}'/> 
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" /> 
</form> 
</div>

Style 3 – Box Biru

<style type="text/css"> 
#exe-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxNJv96-y7-pdQaWmInnELj7mknYwKrIKUaL3yozVzw0Zjb26px7a-EQGd0uycz6IJp2d7X1NlSYuIZKI0SljrzEsZ3lz_HLKFekRSNDaZrvZtQvpBd_2eAJVEBlj9PDSPaF1Ehg87Aw/s1600/Blue-Search-Engine.png) no-repeat scroll center center transparent;width:310px;height:100px;disaply:block;} 
form#exe-searchform{display: block;padding-top:51px; padding-left:30px;;margin:0;} 
form#exe-searchform #s{padding-top:3px; padding-left:1px; width: 208px; font-size:14px; vertical-align:top; border:none; background:transparent;} 
form#exe-searchform #sbutton{padding-top:10px; padding-right:25px; height:15px; width:15x; border:none; background:transparent;} 
</style> 
<div id="exe-searchbox"> 
<form id="exe-searchform" action="/search" method="get"> 
<input type="text" id="s" name="q" value="Search Here..." onfocus='if (this.value == "Search Here...") 
{this.value = ""}' onblur='if (this.value == "") {this.value = "Search Here...";}'/> 
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" /> 
</form> 
</div>

Style 4 – Box Hijau

<style type="text/css"> 
#exe-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgibYFZqEeZ0Zi8T5brnZ4E8mvJ2g9fUAeVAFixuf3u9JOrxji2qKgtiMrHZxzSh4yLlbFvvqG7O3L5yF1TmKPn_xw3Ra0shrqIubhl70rxbbZEd7Blypqd-zl6oy0mH6pxSZJhRu0ibw/s1600/Green-Search-Engine.png) 
no-repeat scroll center center transparent;width:310px;height:100px;disaply:block;} 
form#exe-searchform{display: block;padding-top:51px; padding-left:30px;;margin:0;} 
form#exe-searchform #s{padding-top:3px; padding-left:1px; width: 208px; font-size:14px; vertical-align:top; border:none; background:transparent;} 
form#exe-searchform #sbutton{padding-top:10px; padding-right:25px; height:15px; width:15x; border:none; background:transparent;} 
</style> 
<div id="exe-searchbox"> 
<form id="exe-searchform" action="/search" method="get"> 
<input type="text" id="s" name="q" value="Search Here..." onfocus='if (this.value == "Search Here...") 
{this.value = ""}' onblur='if (this.value == "") {this.value = "Search Here...";}'/> 
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" /> 
</form> 
</div>

Style 5 – Box Merah

<style type="text/css"> 
#exe-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_F36hVSO_FRStoD0zJFl5Usbk0VyAf8zbMGnIf5NJF55z-ukzpyexCJzWBvdHnrr9jZjJkVI99pWY0CY_zI1d7Lz_gDOzGok0leE-w-Kkzjw_h0N8zDs1mO9GgM7_gAfmuBXxMZYmGw/s1600/Red-Search-Engine.png) no-repeat scroll center center transparent;width:310px;height:100px;disaply:block;} 
form#exe-searchform{display: block;padding-top:51px; padding-left:30px;;margin:0;} 
form#exe-searchform #s{padding-top:3px; padding-left:1px; width: 208px; font-size:14px; vertical-align:top; border:none; background:transparent;} 
form#exe-searchform #sbutton{padding-top:10px; padding-right:25px; height:15px; width:15x; border:none; background:transparent;} 
</style> 
<div id="exe-searchbox"> 
<form id="exe-searchform" action="/search" method="get"> 
<input type="text" id="s" name="q" value="Search Here..." onfocus='if (this.value == "Search Here...") 
{this.value = ""}' onblur='if (this.value == "") {this.value = "Search Here...";}'/> 
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" /> 
</form> 
</div>

Semoga Bermanfa'at...!!!http://www.ramabanten.us/2013/02/5-widget-kotak-pencarian-yang-keren.html