Widget Quick Search Keren

Widget Quick Search Keren
Di Posting Oleh : NAMA BLOG ANDA (NAMA ANDA)
Kategori : Tutorial Blog Widget Blog

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 www.blogger.com
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 kosongi 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/AVvXsEidbTbbCGB7f5LJ9SmfaGQFpSVfMQ7xo1bn8TA3iZI9AT_tiiDyY9aPYESmvv5JPYj17G69U5iMjSM3v-neObqbORuEfZjgtgiGetit3wCyevw82hKc4vGdcvEuSU2uEOlKQmRDok2sNQ/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/AVvXsEinXvoiZ9jJrN349NX9Y_FqBniNKO5DoXdBcgPawaxCKgqbHrUWqWc9pG6zzjyp7EAjDqRFSp0Q_F-tAO8PGABsJDrCY2LxZicVdozRdAhO316Ps9BuzhXiNCsjTIJJ1SAdwSxVExV60w/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/AVvXsEgL_2NxD4HYgm3whlSWd8SOevIamV42WMq-pFlVQQlbIekoIz3MkHAlojjNIGemWWvV_b-2Dg20wnFDNOwCHRv6Nn5dAoIw8TEbDYTp7Jil6IFIfrLyjx9dgSRPDq-t0T_TNCAoUDppDg/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/AVvXsEhMgZKPFYeR7-1BquKnsYrvQDU0tQ7xEevfe4KYWArs9Mf1wcnTTkHdNgxC6eK7rwH-MoiWaRiep2h-l3ll9035Q41cQDnTEyKqQXQxEyFruk_OTzx7gZiOHkOZnAqvs2OJDp5-Z7mn2w/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/AVvXsEgPlfQNMRSgSYlwVUjV_a55qPlxH7A22PExhXYGPL_bmJV0aozyhXmDDslvQKfs59imWqYoTqcq1W40S9D_nV8zk2oUz8DG0anSVx2haJA689-LAR6bR89kHj3-RRtRhghuJ67DwlIKvw/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;}

Source : http://www.mboir.com/2012/12/5-widget-kotak-pencarian-yang-keren.html#ixzz2LadMM0gB

Tweet