0 Search Box Simpel dan Keren Untuk Blogspot

Langsnung ksaja dan simak langkah-langkah cara membuat Search Box Simpel dan Keren Untuk Blogspot:

1. Login ke akun blogger sobat 
2. Masuk ke rancangan/design 
3. Pilih Page Element/Elemen Laman 
4. Kemudian Add Gatget dan pilih HTML/Javascript, dan masukan kode search box dibawah ini: 

Style 1

><style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiM65k9oli91M-XGeNAeVWN1Y-v8TjgKUKmQcV0iZSFnMgVPgc_IWrE6Wm1JH4KfjxBqROxJVCDAhzrQE9PCqQMSaDSH4NBx0fU-4cbPkC6A7AriEXgIuk1szpccHx2W33bQCLEnwwp4g/s320/kode-blogger_searchbox1.png) 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/AVvXsEgAsoywVQ5DdkYf-FvtukcQFkvqcF5WXjRCrXsM8aFtvZ3diMLTZ_tYLuX6DY-nxq1wl_JxHIwgCEnW6SP8A8rLhkCD6faurbq0Hi3DLAvv-TqlBINKnJoYzSTPITWDEELNKGwlCp7K2Y8/s1600/kode-blogger_searchbox2.png) 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/AVvXsEjnmkhRWmpfjZQ3RF3Q5xLXnknGRdTtABpnqRIP3jzadi23OSno-JfpEDqd5AyAPJDT8B3dNpq6uTDiPyFp3C1dYePfDMwm67ZlbiPqUVcDs5k1knjVeKYtwdwLYm4z3gb6JFQ81qPdxIg/s1600/kode-blogger_searchbox3.png) 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/AVvXsEhfNtoUts4t-fImW_BAGHObPxrEvOmpR2Ham0XE1ip23bSlhGbZ8NnIKvCvY97LBUqLlRLqWAAPX4KMM1DGbDuZf5XZ7QHxPZEecsWJ1rooMsQ7Om16FjGzrx-f0DLrgP3T8gDikem3tgE/s1600/kode-blogger_searchbox4.png) 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/AVvXsEhoGLXuRHLq-i5H3ZKYMuliJVkhl4PDPlgB8edW-qQP1hyphenhyphenDfT2byagsv3kj2wUmJ92Crmj_1dII1E0PPENOk6thIf5bykzsQz96ivzsMtoFzX-ChrOn6OBNhGhmxCFKMGQE1pITrljhMWM/s1600/kode-blogger_searchbox5.png) 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/AVvXsEhAXW9nnTX6mVKoeYtt1LFoCqw7-1spGcLswSibzmrXmaNYchumGL2kZ9jIQ-TNeOyJVyYGXeDEvR9pBHog8NtVMfBQMdG6Br7KWduADbEa2syBkIQjrKbqk2n-cnQ-Sm5Rp5x8C045OCs/s1600/kode-blogger_searchbox6.png) 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> 


Sip... Search Box Simpel dan Keren Untuk Blogspot diatas hanyalah beberapa saja yang bisa saya share, pastinya ada lebih banyak lagi diluar sana. 
Semoga Bermanfaat
Salam : Adi Vicar Danu Nuggroho