Membuat Kotak Search Pribadi di Blogspot
Membuat kotak search pribadi di blogspot. Tutorial kali ini akan mengajarkan kapten bagaimana memodifikasi kotak search kapten, 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 :
Cara pemasangan :
- Log in ke account blogspot anda
- Dashboard >> design >> page element
- Add a gadget >> html/javascript
- Copy paste salah satu kode kotak search di bawah ini >> save
KODE DAN STYLE KOTAK SEARCH
Style 1
Style 2
Style 3
Style 4
Style 5
Style 6
<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinuXM0IuUhoTCV0Xhi1xIQyZ13XZrzBZFUvZatVy4cFeL_1wwDLVA1XCXh8qaO3rlfbaWpiktCu0JpAIkyutCD5rgr4zPwHmqm-wEcwX_I6u6A1Zxax9ZrQ6GlMiSDp1fqOY31tz9aa_ZR/) 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>
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinuXM0IuUhoTCV0Xhi1xIQyZ13XZrzBZFUvZatVy4cFeL_1wwDLVA1XCXh8qaO3rlfbaWpiktCu0JpAIkyutCD5rgr4zPwHmqm-wEcwX_I6u6A1Zxax9ZrQ6GlMiSDp1fqOY31tz9aa_ZR/) 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/AVvXsEik_uFYeBqOss1oUz9rsXq5eGbd4GRPfQeJZ0eh73bHCHJlAgbhmTOpEXYbdDyNp_UiVGKDzFtF831ydkDTf1q3ET-_gyHLdmATj9zcMmiEY4nqzB-kQd4fjIA0g4xL0DG7Eydc-OUR_gZy/) 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>
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik_uFYeBqOss1oUz9rsXq5eGbd4GRPfQeJZ0eh73bHCHJlAgbhmTOpEXYbdDyNp_UiVGKDzFtF831ydkDTf1q3ET-_gyHLdmATj9zcMmiEY4nqzB-kQd4fjIA0g4xL0DG7Eydc-OUR_gZy/) 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/AVvXsEgQ8D7SPUwP5A3gsc5iXNNDCpY6a5NBmgdnCPHmuG8lqB7AS3dMnyXus3DV7XCbuVQYyy1W1xCMgzmphN_9oGNmRsssQoU3MN1mlGXU7t6trl-Z0F7ojtpAuJ8cR0miJtCqY43FfglUATq2/) 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>
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQ8D7SPUwP5A3gsc5iXNNDCpY6a5NBmgdnCPHmuG8lqB7AS3dMnyXus3DV7XCbuVQYyy1W1xCMgzmphN_9oGNmRsssQoU3MN1mlGXU7t6trl-Z0F7ojtpAuJ8cR0miJtCqY43FfglUATq2/) 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/AVvXsEjB95DlzhdEvuIZhPcjnBdQBA58Li5elUHS06JlLir0w8OGpZFyaRDLuY53Qwg66OJCt92Mk_sjBY9Be3rBm-9MmvH1KBTRfgQPKW3ZsfyHN1GOCnizhsIhJ5hfVqbnduL0ETToOhnH2RiM/) 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>
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB95DlzhdEvuIZhPcjnBdQBA58Li5elUHS06JlLir0w8OGpZFyaRDLuY53Qwg66OJCt92Mk_sjBY9Be3rBm-9MmvH1KBTRfgQPKW3ZsfyHN1GOCnizhsIhJ5hfVqbnduL0ETToOhnH2RiM/) 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/AVvXsEjCxAJBGNduvN4vSFKmGjO_waEUJuI3rOIoMtZtMdskwhIepnRzVEM_riM7gpDzQvF0oTW7rvNEfZ9qfXfx6tPdj4wEAfg61EIoSb37_o8S1CJXmfGNYS8S08puxc3BvBmyitynmRHlvF_j/) 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>
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCxAJBGNduvN4vSFKmGjO_waEUJuI3rOIoMtZtMdskwhIepnRzVEM_riM7gpDzQvF0oTW7rvNEfZ9qfXfx6tPdj4wEAfg61EIoSb37_o8S1CJXmfGNYS8S08puxc3BvBmyitynmRHlvF_j/) 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/AVvXsEidTK4ymxYvNQNH4r6Vxxph5vhGCdMjOxeKaW-XJmocyQhY5us6AgmEeehA-4JqFM4qUbFWjNA7kv3ePZiOO9EkUmjwmJCsx9QioZegzQjmVQCiOLYj-wVcBVNNjAtEaXMfeNB_GNmQT_Ow/) 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>
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidTK4ymxYvNQNH4r6Vxxph5vhGCdMjOxeKaW-XJmocyQhY5us6AgmEeehA-4JqFM4qUbFWjNA7kv3ePZiOO9EkUmjwmJCsx9QioZegzQjmVQCiOLYj-wVcBVNNjAtEaXMfeNB_GNmQT_Ow/) 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>
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"/>
Selamat mencoba! Jangan lupa dukung saya di kontes Mercedes-benz Mobil Mewah Terbaik Indonesia.
{ 0 komentar... read them below or add one }
Poskan Komentar