How To Add Fresh And Beautiful Search Boxes To Blogger

Blogger does not give a search box by default. We have to add the search box by our self. Every blog should have a search box. By this way your readers can find anything on your blog easily. Blogger only give the Google Search Box which is not the right search box for Blogger blogs. In this article I am giving a designed and perfect search box for Blogger blogs which only searches your blog. To add a search box to your blog follow the steps below.

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.

Fresh And Beautiful Search Box Style 1

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

Fresh And Beautiful Search Box Style 2

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

Fresh And Beautiful Search Box Style 3

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

Fresh And Beautiful Search Box Style 4

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

Fresh And Beautiful Search Box Style 5

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

Fresh And Beautiful Search Box Style 6

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

Enjoy!