Add New Google Style Search Bar To Blogger

Add This To Del.icio.us Tweet/ReTweet This Share on Facebook StumbleUpon This Add to Technorati Digg This

You can easily add Google style search bar to blogger. Follow the instruction step by step. You may like this Google style search box. It also looks great.

Go to Blogger → Design → Edit HTML

Backup your template

Now find the following code using F3

]]></b:skin>

No paste the following CSS code just above ]]></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/AVvXsEj97RcfvOZug5L98lQVbCDp-PiDvipU6Qmg4tXjVG1b5DdS3Y7n3WzNl0i8Xp4_Q56IZKX82GYaQqVdGR-tyj5HMNnFuoJvY_J4ePyGlPPzQIqrHnvw9p_NpFqyLpiJ387c0vplcApLsGU-/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/AVvXsEj97RcfvOZug5L98lQVbCDp-PiDvipU6Qmg4tXjVG1b5DdS3Y7n3WzNl0i8Xp4_Q56IZKX82GYaQqVdGR-tyj5HMNnFuoJvY_J4ePyGlPPzQIqrHnvw9p_NpFqyLpiJ387c0vplcApLsGU-/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.edutechnology.net*/

To change the width of the search bar just change the code highlighted in yellow color

Now find the following code

</head>

Copy and paste the following code just 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>

If you have already added jQuery script in your template you can remove the highlighted code

Now finally you can save your template

Now go to Page Element Tab → Add A Widget → Add A HTML/Javascript Widget

Now paste the following code 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>

I hope you liked it. Take only 10 seconds to share the article with your friends