2.Scroll down to where you see </head> tag .
3.Copy below code and paste it just before the </head> tag .
<style type='text/css'>
.formbutton{
cursor:pointer;
border:solid 4px #ccc;
background:#999;
color:#fff;
font-weight:bold;
padding: 1px 2px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmscDtnz20AcZVeZf5ZQaiv9Yhp1LnwH2kAw_Mn8BWbcGdADn3-rE2mMXvfEu5Hj8G3O_QVQGDxnQYA-WCMjYg4n55BFPWrVBcvw4edwtAN5atmO6zOcCSZOVn8YHgLxMIZ-ZUe_PO0fc/) repeat-x left top;
}
.formbox{
border:solid 5px #000000;
background:#ffffff;
color:#000;
font-weight:normal;
padding: 1px 2px;
}
</style>
NOTE:You can change background image,colors,borders,.. as your choice.
4.Now save your template.
5.Go to Layout-->Page Elements and click on "Add a gadget".
6.Select "html/java script" and add the code given below and click save.
<form id="searchthis" action="http://YOURBLOG.blogspot.com/search" style="display:inline;" method="get">
<input id="b-query" class="formbox" maxlength="255" name="q" size="35" type="text"/>
<input id="b-searchbtn" class="formbutton" value="Search" type="submit"/>
</form>
Note:Replace "YOURBLOG" with your blog name.
You are done.It will look like this:
CSS Search Box to blogger
Sponcer Ads
