How To Add Smart CSS Search Box to Blogger V2

Hi! dear visitors. Here is the CSS search box v2 gadget. i think this better thank older css search box v1. so here is the new way to add CSS Search Box v2 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. it's very charm and beautiful. so please add your ideas, comments and anything here.Thank You..

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'>
#search {
height:34px;
width:auto;
margin-top:10px;
padding:17px 5px 10px 15px;
width:311px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-5pXj_jrKIEuIV-kO03KsTLfuMLeA5mdnuTEfG7GGSPDkTWhTghTV8uJKyEBgHqv1k9Zl_YucGd3J6cpWXG9z5P_XO1lazO37nhLSjZHRXYsVTGd4KkN-RguxTbDW1Dv3Q3_Df9pm5TBH/);
}
#search form {
margin: 0;
padding: 0;
}

#search fieldset {
margin: 0;
padding: 0;
border: none;
}

#search p {
margin: 0;
font-size: 85%;
}

#s {
margin-left:0px;
float: left;
width:231px;
padding: 6px 2px 6px 5px;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiB5h08ahbP_7rNaB0TOq_nD4IuY4aou2Nl9iPql9ah1DtMd2jHD97Jtv5u0WcjudYlf0k1CBsgqfftC149cW92YR1Y_RNTglOV6ezmbShyDSavS8OGdwrZQA_L9TJAOMnapWP3WK9JUOo9/s1600/sform.png) no-repeat;
border:none;
font: normal 100% &quot;Tahoma&quot;, Arial, Helvetica, sans-serif;
color:#C6C6C6;
}

#searchsubmit {
width:57px;
float: left;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaH2Nip02oL0coeJ2hN2YvFZRPu-Ln4VG8KqqcCjI68mLeuqYc_YxpnQ2Kn_NLpiZ7OnIH7Xk3drtuS1vWX3oKCky084EoKewotvfekmkMuJZILhrkOU986q7PvMYHzcFgZ_k0gnq1BFzN/);
border:none;
font: bold 100% &quot;century gothic&quot;, Arial, Helvetica, sans-serif;
color: #FFFFFF;
height:28px;
margin-left:5px;
}

</style>

Note:Please host above 3 images yourself.

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

<div id='search'>
<form id="searchform" action="http://YOURBLOG.blogspot.com/search" style="display:inline;" method="get">
<input id="s" name="q" type="text" value=""/>
<input id="searchsubmit" value="" type="submit"/>
</form>
</div>

Note: Remember to replace "YOURBLOG" with your blog name.

You are done