How To Add Stylish,Colorful Unique Search Box To Blogger

How To Add or Create Stylish or Colorful Unique Search Box To Blogger Blog? Usually blogger does not provide any box their templates. Thought provide is not unique. Doesn't work properly. But it is very necessary for any blog or site. If you want to add additional search box follow below steps :-














1. Login to your Blogger account.

2. Click on Dashboard >> Page Elements tab.

3. Click on Add a Gadget.

4. Select HTML/Javascript widget.

5. Select which Search Box will you use and copy than paste there.

Style 1:

 

<style type="text/css">
#w2b-searchbox{background:url(https://lh5.googleusercontent.com/-
Ff_C748fAD0/TkVT1CCTDLI/AAAAAAAARMw/mMPjkssbUpI/s1600/Add-Black-Search-Box-To-Blogger.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://lh6.googleusercontent.com/-qRDJzcYH8R8/TkVT1cR3JJI/AAAAAAAARM0/G-8nhnv-pYU/s1600/Add-Orange-Search-Box-To-Blogger.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://lh3.googleusercontent.com/-n4e-M5Cdg8I/TkVT18qms2I/AAAAAAAARM4/YTaZyXgXB9Y/s1600/Add-Red-Search-Box-To-Blogger.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://lh3.googleusercontent.com/-K-zX9SUuiE4/TkVT2XrI9XI/AAAAAAAARM8/7dAU_JBQ_vE/s1600/Add-Silver-Search-Box-To-Blogger.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 5:

 

<style type="text/css">
#w2b-searchbox{background:url((https://lh4.googleusercontent.com/-AvrwTXQQ8jw/TkVT2mP0IQI/AAAAAAAARNA/GzZnct-d_N8/s1600/Add-Gray-Search-Box-To-Blogger.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 6:

 

<style type="text/css">
#w2b-searchbox{background:url((https://lh5.googleusercontent.com/-uPAcVU9wLDQ/TkVT0Ax_mZI/AAAAAAAARMo/BRxdAF8VeZs/s1600/Add-Blue-Search-Box-To-Blogger.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>

6. Save HTML/Javascript widget and Preview than Save. You are done