Cara Memasang Widget Quick Search

Share on :
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:
clean_quick_search_pack
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/AVvXsEj6xyy6RyeSH82MSKzP7IUbTpfpeosYtKgiCw3JQcia3gJjlw1s_T5DQw-IhJ7ZLp8NlUviNR_03mnGf7Wg0ik0msrfdWNcr3H_0APjpPsNLtlkTZfJ4XCiy3sQu7OoIsWr1zT5yZK6xA/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/AVvXsEj9BgF81y1dekwMvfHk6B-zM8QYoBZV8VC4GtX8Y89LiulA6QtReZdBWActsqPhz0GkX_5XA4dDatTOmuh8UCS7cMLlrOVHlUq2F0AUgAJ9GqiaAcmU5AVUKpWVGHLqsfBiYTcmGuvmZA/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/AVvXsEhGNqNvIwBGi1Zqe715eAqeCg0I114hwB6A2K70xb5l0tTpQOEk3pv7UaDkHrN2fbRhukDf-BkxU2t_cOhZ0fkRrU5IYZgaS0QD31FASkBWk9Wo8Rhj7x4Sl8LR2b_0vg2P49WxCrBLWA/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/AVvXsEju5yzy_8m8NASW1bcTftPr2vgGzge-NkDOjUe0Id3pRTgwlXv_VE1fQvtzt7kc345cfdegbMahBNiz_IzcJABSfoVdnnqE7XG6zVXTvTgxYmMkgMl-oEJqeG4HoRP9c3o6Ux7SSpYaLg/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/AVvXsEhOipR7i89jiDTe93Ca30K34_Xy2-rCHYcF8BIgtDdC9xb4HYtKNb9Kyi4u6EN0lXVsQeDJ_Ykxi5Z75CJFG3fI2GfQCewQFq6bLqLBRHpHSqb-x7XrHO_5EDoUZgvnCTXbAcwCMHwElQ/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>
Share this Article on :

Artikel Terkait :