ADD NEW GOOGLE SEARCH BAR FOR BLOGGER

I am sure you will be amazed after viewing this post. As we are telling you about a new gadget which you can have on your blog, it is google styled search bar, as it looks like google search bar and experienced only on official google blog. The new search bar has the modern minimalist look with rounded corners and hover effect which you will not get in any of the other search bar.

ADD SEARCH BAR TO YOUR BLOG

1). Open your blog and go to Dashboard.

2). Select Layout and Edit HTML.

3). Find the following piece of code in your blog HTML code. HOW TO FIND CODE IN YOUR BLOG HTML CODE

]]></b:skin>

NOTE :- Before making any changes you should backup your blog template code. HOW TO BACKUP YOUR BLOG TEMPLATE

4). Copy and Paste the following code just above the code you have searched.

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

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

5). Find the following piece of code in your blog HTML code. 

</head>

6). Copy and Paste the following code just above the code you have searched. 

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

7). Save your template.

8). Go to Page Elements.
9). Select 'add a gadget' HTML/Javascript.

10). Copy and the Paste the given code Inside it and Save it.

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

NOTE :- You can place it according to you. Select and drag and drop it.

If you got a good experience than leave comments and Email Me for any assistance.