Add Stylish CSS3 Search Box To Blogger

A search box helps your visitors find the information they are looking for easily and quickly. Most of users coming from search engines or landing at your homepage will want to search the information on your blog and they will need a search box.

Today we are giving you a beautiful, responsive CSS3 search box for your Blogger blog.

This search box will surely force your visitors to try a search on your blogspot blog.
This search box is responsive and even works on non CSS3 supported browsers.

How To Add Search Box To Blogger: 4 Steps

1. Go to Blogger Dashboard and select the blog to which you want to add the search box
2. Now click on Layout tab and add a new gadget in sidebar (or wherever you want to add it) and select HTML/Java Script for the gadget
3. Now paste the below code,  name the Title as Search or any other text(you can also leave it blank).

<style>.searchform {
display: inline-block;
zoom: 1;
display: inline-block;
border: solid 1px #d2d2d2;
padding: 3px 5px;

-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;

-webkit-box-shadow: 0 1px 0px rgba(0,0,0,.1);
-moz-box-shadow: 0 1px 0px rgba(0,0,0,.1);
box-shadow: 0 1px 0px rgba(0,0,0,.1);

background: #f1f1f1;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
background: -moz-linear-gradient(top, #fff, #ededed);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie7 */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie8 */
}
.searchform input {
font: normal 12px/100% Arial, Helvetica, sans-serif;
}
.searchform .searchfield {
background: #fff;
padding: 6px 6px 6px 8px;
width: 202px;
border: solid 1px #bcbbbb;
outline: none;

-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;

-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
}
.searchform .searchbutton {
color: #fff;
border: solid 1px #000;
font-size: 11px;
height: 27px;
width: 27px;
text-shadow: 0 1px 1px rgba(0,0,0,.6);

-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
cursor:pointer;
background: #5f5f5f;
background: -webkit-gradient(linear, left top, left bottom, from(#333333), to(#454545));
background: -moz-linear-gradient(top, #333333, #454545);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#454545'); /* ie7 */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#454545'); /* ie8 */
}

</style>

<form class="searchform" action="/search" method="get">
<input name="q" class="searchfield" type="text" value="Search..." onfocus="if (this.value == 'Search...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search...';}" />
<input class="searchbutton" type="submit" value="Go" />
</form>

4. Now click save and you are done !!!