Google is the best search Engine in the world. Google update there home page in June 2011, New Google homepage with smaller logo and links moved to the top and bottom edges of the browser for a cleaner look, I think this look much better than older look. I'm sure you will have noticed the new Google design as covered in the post
Evolving the Google design and experience on the official Google blog. when see Google Style search box tutorial on
http://www.Queness.com I am very happy and add this search bar on my blog. The new search bar has a more modern minimalist look with rounded corners and hover effect. you can create Google Style Search widgets with some HTML, CSS & JQuery Combination. in this tutorial I�ll also show you how to re-create Google style new search button with some simple CSS Codes. I edit this search button with Green color which compatible with my template style sheet. you can also edit button style with your template colors. so Read all steps and make a beautiful Search button. Special thanks for this tutorial goes to
Awesome Queness.Com design blog again & again. You Can See Live Demo on this Blog.
Add Google Style Search Bar To Blogger
First we need to edit your blogger template so Always Make a Backup of Your Template Before You Edit Your Template (
how to make a template backup.)
1. Go to your blogger Dashboard>> Template >> Proceed press CTRL+Fand find the following Code. (
how to find code using search bar)
]]></b:skin>
2. Paste following code before/above }}></b:skin.
/*Start Css For Google Style Search Box*/
/* div container containing the form */
#searchContainer {
margin:0px;
}
/* Style the search input field. */
#field {
float:left;
width:180px;
height:27px;
line-height:27px;
text-indent:10px;
font-family: Source Sans Pro, 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:60px;
height: 31px;
line-height:0;
font-size:0;
text-indent:-999px;
color: transparent;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMV1Tk2O7nFWDesPkl-VWBepfF4o2jax_mKRG-I2OsvPYyYhQUaiNX3Ew1-XDO_UM0GVguTr1P_QkYo7vxuezz-y299DXRa1aw2dSvJAmYfk1JOd4yvyBjdVob6p1AbC9HUXGpE7bMGYzn/s1600/iconsearch.png) no-repeat #088a4b center;
border: 1px solid green;
-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/AVvXsEgMV1Tk2O7nFWDesPkl-VWBepfF4o2jax_mKRG-I2OsvPYyYhQUaiNX3Ew1-XDO_UM0GVguTr1P_QkYo7vxuezz-y299DXRa1aw2dSvJAmYfk1JOd4yvyBjdVob6p1AbC9HUXGpE7bMGYzn/s1600/iconsearch.png) no-repeat center #088a4b;
border: 1px solid green;
}
/* Clear floats */
.fclear {clear:both}
Note:- In Search Bar Style Sheet you can edit Font Style, Form Width, Form Border, Font Color, Font Size, Search Button Color, Search Buttons Hover Effect and search Button Border, all these editing I highlighted in blue color you can change it which look is better for your blog design if your don�t want edit just leave it same. & paste before ]]></b:skin>.
3. find the following Code. (
how to find code using search bar)
</head>
4. and paste the following code 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 "X" button
$("#field").keyup(function() {
$("#x").fadeIn();
if ($.trim($("#field").val()) == "") {
$("#x").fadeOut();
}
});
// on click of "X", delete input field value and hide "X"
$("#x").click(function() {
$("#field").val("");
$(this).hide();
});
});
</script>
5. click on preview and check your blog look if all thing is ok click on save and now time to add gadget on blogger sidebar.
6. Go to your blogger Dashboard>> Layout>> and click on add a gadget a new window is popup. in new window scroll down find HTML/JAVASCRIPT when you find this click on plus button and paste this code in your HTML/JAVASCRIPT Text Area
<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>
& Click Save. your Done! and see your blog new search bar look. Thanks Again to
Queness.
The next few months, look for a series of design improvements across all our Tutorials, Widgets, DropDown Menu, Sharing Buttons including Templates & Social Icons Sets. So Subscribe our blog and stay Connected..
if you have any trouble about this tutorial leave your comments and questions below in comment box. Thanks for our post.
