Beautiful New Google Search Style Search Bar For Blogger

Here is tutorial for awesome new Google Search Bar style Search Bar for Blogger. It's totally look like Google search bar.


On Google -

On Blog - 

Installation - 
* Back Up your Whole Template Before making changes.....
1. Go to Blogger Dashboard > Design > Edit Html.
2. Find below code (Use Ctrl + F to find the code)

]]></b:skin>

3. Add below code before ]]></b:skin>

/*Start Css For Google Style Search Box*/
/* div container containing the form */
#searchContainer {
margin:20px;
}
/* Style the search input field. */
#field {
float:left;
 width:200px;
height:27px;
line-height:27px;
text-indent:10px;
font-family:arial, sans-serif;
font-size:1em;
color:#333;
background: #fff;
border:solid 1px #d9d9d9;
border-top:solid 1px #c0c0c0;
border-right:none;
}

/* Style the "X" text button next to the search input field */
#delete {
float:left;
width:16px;
height:29px;
line-height:27px;
margin-right:15px;
padding:0 10px 0 10px;
font-family: "Lucida Sans", "Lucida Sans Unicode",sans-serif;
font-size:22px;
background: #fff;
border:solid 1px #d9d9d9;
border-top:solid 1px #c0c0c0;
border-left:none;
}
/* Set default state of "X" and hide it */
#delete #x {
color:#A1B9ED;
cursor:pointer;
display:none;
}
/* Set the hover state of "X" */
#delete #x:hover {
color:#36c;
}
/* Syle the search button. Settings of line-height, font-size, text-indent used to hide submit value in IE */
#submit {
cursor:pointer;
width:70px;
height: 31px;
line-height:0;
font-size:0;
text-indent:-999px;
color: transparent;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5OVcfK3FTQPqkonamlF9LRdQGbNhhBL3BUVicGwRvWx4gs5XPYPBhtild5lUa18BPn2gdIUp-rJv9RVLqTvuldhSRVf8nzgm6Iglxlqs28o1X5s9UDykt4ASJ2slJMvECWOeaj3XoNAe8/s1600/ico-search.png) no-repeat #4d90fe center;
border: 1px solid #3079ED;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
}
/* Style the search button hover state */
#submit:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5OVcfK3FTQPqkonamlF9LRdQGbNhhBL3BUVicGwRvWx4gs5XPYPBhtild5lUa18BPn2gdIUp-rJv9RVLqTvuldhSRVf8nzgm6Iglxlqs28o1X5s9UDykt4ASJ2slJMvECWOeaj3XoNAe8/s1600/ico-search.png) no-repeat center #357AE8;
border: 1px solid #2F5BB7;
}
/* Clear floats */
.fclear {clear:both}

/*End Google Style Search Bar - Info @ http://newtechsite.blogspot.com*/

* 

Note - To change the width of the search bar simply change the line highlighted in red from 200px up or down.
4. Now find

</head>

*Note - If you have previously added jQuery script to your template you can remove the code highlighted in Blue.
5.Now Copy And Paste This Code Directly Above / Before </head>

<script src='http://code.jquery.com/jquery-1.6.1.min.js' type='text/javascript'/>
<script type='text/javascript'>
$().ready(function() {
// if text input field value is not empty show the &quot;X&quot; button
$(&quot;#field&quot;).keyup(function() {
$(&quot;#x&quot;).fadeIn();
if ($.trim($(&quot;#field&quot;).val()) == &quot;&quot;) {
$(&quot;#x&quot;).fadeOut();
}
});
// on click of &quot;X&quot;, delete input field value and hide &quot;X&quot;
$(&quot;#x&quot;).click(function() {
$(&quot;#field&quot;).val(&quot;&quot;);
$(this).hide();
});
});
</script>

6.Save your template, we have the Css added to style the search bar and the jQuery for the X button now we add the html.
7. Head back to your blogs design page and click Add A Gadget > Choose Html/Javascript.
8. Copy and Paste the following code into the Html/Javascript gadget :

<div id="searchContainer">
<form name="SUYB" action="/search" method="get">
<input type="text" id="field" id="s" name="q"/>
<div id="delete"><span id="x">x</span></div>
<input type="submit" name="submit" id="submit" value="Search" />
</form>
</div>

9. Save the html/javascript gadget and you can drag and drop it into place.
*Now refresh your page.
Thanks - SpiceUpYourBlog (Paul Crowe) For this amazing post.
Throw your queries in comment box.