Fresh and Beautiful Search Box Widgets for Blogger

Fresh and Beautiful Search boxes to your blogger blogs. i given a simple search box widget. here i giving six beautiful and fresh search box to you. Actually these are PSD source designed by Design3edge. i am converted to Blogger for you. hope you enjoyed with this!.

See the Screenshot of PSD source:-

How to Add Beautiful Search Boxes to Blogger

1. Login to Blogger Dashboard -> Design tab -> Page Elements .
2. Click on Add a Gadget where you wish to place Search Box.
3. Choose HTML/JavaScript from the List.
4. Place any one Search Box code in to it and Save the Gadget.

Style 1

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjq5Gx8NzyT1qllqmjfyplrZWhXDplefodDqve3JIXMPduV5UGj2F9i5T2_fAfEs2GVIck3ozRbXGOtSEWzTjtY3ZiwozPrk5qwcUiDNJJ8flm9IFGm_HPVFURY5rk9HDDg7F8G3yHjgtGL/) 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/AVvXsEhG9NPLqj2siLGeh5D4PERc-IyRMOHgw0jAZXnDjJLjEE64CKf2WIrQJ0kyJwUbQUIiH0gHcrErdsF3_Uof1xBXPxE6SvbFdkYXWbMQWU_zQeYkVjp_CZXEBJOAsN0xhcq7ztaMLpmkDxwC/) 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/AVvXsEgc-MOytSv9iEUQFT9QGYSahKQW5sowO5yq2ySER1jbVLNztf7EWgXp09qraL_KjgWRszhWSz8NNgFXwT70y0JtPttBUQd64C1io0V5xvdC48o_KPdi61ro9bnkCEG6Bx1WjgV163a5Fv7b/) 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/AVvXsEgw127yon-_y4eiGar3U25qD3B7BYXaHO2jgve57pdU2V_RYpbohkq0iRWH1-wG_Gg02g3lAf51Kz5um-g54ITLKKtb-B2C6HO0oN3bhM8HdxsygVbU0pLmEdYhooDat5uQ-hFOY4NHiKKT/) 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/AVvXsEgcAVr4zPSGw2LthZc8ZUJ6KkutHgEPAM0-BsZV8epjlG86sxYr9WatkNEbEX0BmauUhG-7l9STqMtuFge3W_15XWsflE_j9oPiSa8YMDTpWKM3cO4eeu51fQvhdvIxec13OhJ7cWnqoF4P/) 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/AVvXsEikG0-2a2oZHGIdUgprmLKKWJiuXWNTNyEETgrOrnKBTZbsi2HT-N92r0l5j7NzvZyPKmQS5gDugoNoLZqz1W01ro16rfJuHRqNqylpgFiSU91zfU0Vc89p3YKn7UrTS7H-7NEHgcHR-GDU/) 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>

Subscribe to Email Updates and Follow me on Twitter to receive Latest Updates form this Blog!

---

Need more Customisations ? Comment your combinations
Below and We will add that in this post as soon as Possible

---