Memberi Search Box di Blogspot

Cara Memberi Search Box

di Blogspot

1. Login ke Dasbor Blog anda

2. Pilih "Tata Letak"

3. Klik "Tambah Gadget"

4. Pilih "HTML/JavaScript"

5. Paste salah satu kode widget search box yang sudah saya sediakan. Simpan.

Kode Widget Search Box:

1. Search Box Hitam

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

2. Search Box Kuning 

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

3. Search Box Merah

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

4. Search Box Putih

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

5. Search Box Abu-Abu

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

6. Search Box Biru

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