How To Add Smart CSS Search Box to Blogger V1

Many bloggers have a google custom search gadget. but i do not like google custom search gadget! so here is the right way to add CSS Search Box to blogger side bar. this is very cool gadget and have a cool design. now you can add this gadget to your blog. Please read below steps and add this gadget. so please add your ideas, comments and anything here..nice day!

1.Login to your blogger dashboard--> Design -> Edit HTML

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/AVvXsEgAz690SeM-AqLToWSlFOkPv7WhfwPSFwsXRWTpg4NO_VY3HRumNqIjpOFtBiBcy_KXlqrHbyLinrZxLrNZRf-QQpFTcnaNfuc4aJ0z40Rwj0-pdkX6_eLuNGmerTS_DNwyzto6N2IXHLQ/) 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