How to add Smart search box for blogger

This is CSS search box.this is beautiful design for your blog.
try it,make the attractive blog.

1.Log in to blogger and Go to Design >> Edit HTML

2. Find this tag by using Ctrl+F  </head>

3. Paste below code 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/AVvXsEjhT3PBLGhyp9NPgOW_rXAtuyAY10f9U8R-pBZNXCvjzFCcwv6tHLWgQeeRs1RxKZWN1uSuNvvxqPAtV9NmXqBY388ovP1UyRkYk6b9TNw2a5hw41rIJR-xC3FsLYGNCArQr-d6X1DWmDDN/);
}
#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/AVvXsEiR9aw5R-M8OMi6cf1UVBlxJ93jnY2z-tmIug1HhGnVfEi8detpMqW9kDLdImWnXWI2vu_zjrwJSK8nJCuMiWvr8XEDmU_qSwfAP48ThbE_wwI6cmi2kqtc5kUIWanSwZhm0wvQY_cdTC37/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/AVvXsEjm1VSzifJKhanjG6ZE4_BneMNf8qQ728abzZm76M8ht0dNAjg5GZF0ODtRT-xLctALpLus7hCExtpH-u31cMdyjd4vCkpch-i0PbHlBpAMqjdzm3p93yFqCItrBJ3Sw5ZmDW_YNjM18A91/);
border:none;
font: bold 100% &quot;century gothic&quot;, Arial, Helvetica, sans-serif;
color: #FFFFFF;
height:28px;
margin-left:5px;
}

</style>

4. Now save your template.

5. Again Go to Design >> Page Element

6. Click Add gadget and select "HTML/java script"

7.Paste below code.

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

*Replace Your site with your website URL

8. Now save it. you are done.