Membuat kotak search pribadi

Membuat kotak search pribadi di blogspot. Tutorial kali ini akan mengajarkan kapten bagaimana memodifikasi kotak search, sehingga akan lebih stylist dibandingkan yang default. Penasaran? . . .

Design asli seperti di bawah ini dibuat oleh Design3edge.

Namun tenang saja, kapten tidak perlu repot lagi, karena sekarang sudah diconverted ke blogger. Jadi, tinggal copy paste kodenya saja.

Cara pemasangan :

1. Log in ke account blogspot anda
   
2. Dashboard >> design >> page element
   
3. Add a gadget >> html/javascript
   
4. Copy paste salah satu kode kotak search di bawah ini >> save

KODE DAN STYLE KOTAK SEARCH

Style 1

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPz7rCZZ99Z_jzOjut_YAqQDW54wLdvXGwN28c_8mhDqdLmsaWkpRx8OrL7bIVEBFM1LOInyBEpyrsLZP-KcLrtAwitBrmc6TIzKLjvQUPmN8aBhHMhQjBHhErJpmEpu5IHM1l_YDwcRaR/) 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 2

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc4X7oLx8L30BHHyPkCtURkx-lRAnVzRgWHPD7YJLgDhptEojuo6h_i3xhYjL-DZ3ivOAn74vQBd0qcO_QirH1AQg3joNhXXxrjXwjGucleIdqrSviKtY0rdyvDNX15l4Ra8z_kIk4nNJO/) 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 3

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg10slwjjYo3sKmFMM_5YQTYxkA6grvthu9QCLRYwMIf65z1s_cVYarPnF97F1IRJaSX7y_xtTMgvkMoznszaqYcMMvWB-IGTWEsNZUINKvD6QolkyPxcUVW7DOhrhqhffyCpdm7MGRbm6F/) 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 4

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCEyMi1uG0xX0dy0AWVILYW7ePpYD5bgJyYVHAjIhXKkYrwlqTW_JoPtSGFrq3RKdbQlYPFV3eMZGoUpHfS2fwgKJka78dCpuqbu1gIj2xmgV-ZNx8oM0KGL50GyA5q6zb9j9JPe02hSct/) 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 5

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimt_J5zjKABNWsZbW8F-cLzsHEOLgVJG69ycT5VVzEoEgEClB5VejMwRNL0O9kGw7BbbUF4oT7UTvBFqWC0f8x4ERAtPLAx3Bbxfix2eqW5Hp81sDfCdMgYls7SCOxsw3cDUGD3BxICmMX/) 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 6

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiA4_Vx3FlHPd8X9KHbXvE6cAtUwm_wzyFelwjzkrVeCmNunE3H-Jo2uAFOd340RBn1t2VJROY5M_zG1B96TIjK7RtS9ff7NZbBt6vGMK0CRK-LXGngiIdwAHRu9xxUgHYWLGtHDdG7inIF/) 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>

Tambahan tips :

Jika ingin membatasi hasil pencarian maka copy paste kode di bawah ini di atas kode </form>

<input type="hidden" id="justnothing" name="max-results" value="10"/>