Cool Search Box with New Google Style

Cool Search Box with New Google Style

Google has updated their appearance, including their search box. I think this Search Box is very nice with some. So better for us to try create Cool Search Box with New Google Style. Below is the difference of the search box.

OK, let's see the . Looks nice right? Now if you want to create cool search box with new google style, just follow the steps below.

1. Log in to your blogger account

2. Go to Design -- Edit HTML

3. Copy the code below, and paste above ]]></b:skin>

/* 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/AVvXsEiFWVKqcQ2_QWXbYYGIqLY2jhRJscyBsehkbf8GE7zFK3PpUP2btP3ZygtmX_ChyphenhyphenImCxikPhf5_GKuHPJuhVf5m-stutXD1tyRgx5ehBnat0BLJYfZ2jJPL_pyfHXR49goWr6cT7w4Gd2bL/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/AVvXsEiFWVKqcQ2_QWXbYYGIqLY2jhRJscyBsehkbf8GE7zFK3PpUP2btP3ZygtmX_ChyphenhyphenImCxikPhf5_GKuHPJuhVf5m-stutXD1tyRgx5ehBnat0BLJYfZ2jJPL_pyfHXR49goWr6cT7w4Gd2bL/s1600/ico-search.png) no-repeat center #357AE8;
border: 1px solid #2F5BB7;
}
/* Clear floats */
.fclear {clear:both}

=> Adjust the width with your blog

4. Copy the code below, and paste above </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>

5. Click save the template 

Adding New Google Search Box

1. Go to Design --> Page Elements --> Add Gadget

2. Choose "HTML/Java Script"

3. Add the code below

<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>

4. Click save the template