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/AVvXsEiGLMeW1LmF2xKGxepdAI2I8erS92FknO4irMDjN3SGURyu-MgnB4T2t_NC9FnFs3f_7k7KvKiqSojC7bVbu_xhvwnHayMCSoeWi5x_4srPCDX85isCeQXNGSuok9cmKcas5aU98Ot8gQ/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/AVvXsEiea2fjHMjUecFcJu9TGRjnZGW4PUFRLfYXMebOh-dA_XLTZ5EkglooQgPecCPNaMoEE-H5gJzJq3rrkEm-zYppCfwbwCWcqcYEdA2gGBLZQK3cHyCmihO3o2-RltgzbawizHlS9QwF3A/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/AVvXsEgc24T2TKccV9F5Z1L6Q-QfI1FbqBvM80YucDlMMMgHCgu0xNJFmFw8EhJnkqu8Lyb93_GSiqy3Xt83LwXHy7oG52DawnvSnjQHstQ_y8Zo9ny2RZbo2CA4R3py-MwgtjQjuZCtD3goTA/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/AVvXsEh8UfwqwITD9E7a1G76J9-4Rf3MXq22xQEbDKk0-XtK9dkY04Jfjmb5Z7IwLLdddeMirCkVkY65JCJhCktjwumi5NkTdiKCimF2Kf_GysNWgZXO1FJmdLBwVMarDLyWfqohCsMi0IwzGw/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/AVvXsEgBsSFdtAG7IRhpprFLgrVILfvbsrkOwAYKaZZuJkGoIjatibw1FeVRqVtZxvq-R3HZ2zyETUTpN5NpXF-rR1zVdGuU_xrK-aZ78A0l00i_EL-zQwYodCOHK2Zzijo-r0wm_MwW5yQfcg/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...!!!

Jangan Lupa Untuk Membagikan Artikel Ini Ok