How To Add Smart CSS Search Box to Blogger

How To Add Smart CSS Search Box to Blogger? Here is The Simple and Easiest Method.


1.Login to your blogger dashboard--> layout- -> 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/AVvXsEiI94OotqTblCB_g039U2StOairPWvUVC1DqiYFjFWJQQpvhTlpPi-1o_i5qZRj8cDKkpGAiFtV2JDUyy_S4JgeVQwBmMQ8lHWd61x4GGozWBtYbRbKM1nRua78DNEvU6xy__Nt0eyjzEW_/);
}
#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/AVvXsEj2ixOxF9y7PhXxquvcgsFuzPtrJPNOeWx0CnbD3Tgm84O0JfMvGiHaLnuYGfz2i7EMhHuL_uSOndJNkJLXE5W3WpTvHh68WuhalzteIxe5bBpJvBsGRu5sZffPtTz0BRDVMEAmfabDnmgT/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/AVvXsEgxjpAOwyItubrd5oQcBrjmXjAxFrBgw3-tY8NUB3M5jl7bmfsLlDUqfW0fzuAZsKR8yangAEhz9aFAm-aFVZYoZHrS2uqWXFGY2Ya2O9CJqFiyAmATJpToyn_73HuTMEOru8-IQAYptmq6/);
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.It will look like this:


Smart CSS Search Box to Blog/Website