Awesome New Google Search Style Search Bar For Blogger




| 21 comments

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.While the changes have been subtle some stand out like the new sleek search bar on results pages.The new search bar has a more modern minimalist look with rounded corners and hover effect.But one new feature i quiet like is as you type your text into the search field an X appears than can be clicked to remove your text.Yes it's nothing major but still a neat feature none the less.So in this post i will show you how you can re-create the new Google search bar and use it on your blog.

Once on your blog it will look the very same, using jQuery for the X delete button and your blogs default search to generate results.This was covered on the Awesome Queness.Com design blog and with just a few changes i have it ready to go For Blogger.

Lets look at some screenshots and the live demo :

On Google



On Blogger



On the demo page i have it wide across the top of the posts but you can also easily make it smaller to fit nicely into your sidebar.If you want to actually try it just search for one of the recent posts you can see in the sidebar of that blog.

View Demo Button

Add The New Google Style Search Bar To Blogger


Remember Always Back Up Your Template Before You Make Changes - How To Back Up A Blogger Template

Step 1. In Your (New Design) Blogger Dashboard Click The Drop Down Menu For Your Blog > Choose Template > Then Edit Html > Now Proceed > Tick The Expand Widget Templates Box as shown in the video Below :

Step 2. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code - How To Find Code In Blogger Template Template)

]]></b:skin>

Step 3. Copy and Paste the following code Directly Above / Before ]]></b:skin>

-Scroll Box Make Sure To Get All The Code.
/*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(http://4.bp.blogspot.com/-GX7E4j3jwR0/ThMXKjuQ9VI/AAAAAAAAEsE/rJE5Ip1qDEg/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(http://4.bp.blogspot.com/-GX7E4j3jwR0/ThMXKjuQ9VI/AAAAAAAAEsE/rJE5Ip1qDEg/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.spiceupyourblog.com*/

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

Step 4. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code - How To Find Code In Blogger Template Template)

</head>

Step 5. Now Copy And Paste This Code Directly Above / Before </head>

Note - If you have previously added jQuery script to your template you can remove the code highlighted in green.

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

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

Step 7. Head back to your blogs design page and click Add A Gadget > Choose Html/Javascript.





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

Step 9. Save the html/javascript gadget and you can drag and drop it into place.

And that is it ! A lot of steps but over all i think it was easy enough to implement.Thanks once again to Queness for the original design, make sure to check out more of our Blogger Gadgets and jQuery tutorials.If your looking for something more basic we have a Simple yet stylish search bar for blogger.

Drop Your Comments And Questions Below.


Join over 5000 Subscribers! Please sign up to receive Updates.

SUYB has its Focus on Quality. If we post Crap, you can unsubscribe.

No Spam and No Garbage! - Use RSS, Twitter & Facebook as an Alternative


If You Enjoyed This Post Please Take 5 Seconds To Share It.

21 comments:

  1. I am with you, I think this is neato! I just redesigned my custom search on my blog, but I will most definitely try this out on others. (Also per your advice have been thoroughly overhauling posts to add those link details, and have added social networking buttons to the main page as well.)

    Thanks for all your help Paul. :)

    ReplyDelete
  2. Yeah, this is cool..!
    Btw, Paul.. on your demo i saw a cool font resizer.. I want it and i waiting for your post about how to put it on blog. I really want it..
    Thanks..

    ReplyDelete
  3. Thanks For sharing you are my inspiration greeting from indonesia...

    ReplyDelete
  4. Hey Paul,

    Stumbled upon this blog. It truly is like finding a treasure. My blog is gonna get a revamp. Kicked off by adding Search Bar. Its was so simple with clear easy instructions to follow. Happy to be following you.

    Regards,
    Seema
    amchi-bong-konnexion.blogspot.com
    seemabbas.blogspot.com

    ReplyDelete
  5. can i use this search with google adsense search box please tell me :D
    and thanks for this post

    ReplyDelete
  6. @ mimo - I'm afraid you cant and although you often see the AdSense for search box styled it is actually against the AdSense terms of service ! You may not make any changes to the appearance of the AdSense for search.

    ReplyDelete
  7. sir...i removed the green jquery code, because it is used in the same blog before....and after removing the code the x mark in the search box just vanishes out and doesnot make any effect...what's wrong with this?

    ReplyDelete
  8. i like ur search bar hope its works to search my blog :))

    ReplyDelete
  9. SPICE UP YOUR BLOG IS THE BEST HELP FOR BLOGGER

    ReplyDelete
  10. Hi I added this and it was too big for my sidebar so I kinda changed size (not up on html) so it went smaller but changed the configuration and I dont seem to have any text near it any ideas. My blog is in my info section.

    Cheers

    ReplyDelete
  11. Thanks =)
    I'm curious though, do you know how to change the color of the button to match one's layout?

    ReplyDelete
  12. is the search results are accurate like Custom Google sarch?

    ReplyDelete
  13. Nice Post, but i want to remove my default search box first.see my blog-http://androidmarketguru.blogspot.in/. I didn't see any remove option. Please help me..

    ReplyDelete
  14. Nice Post, but i want to remove my default search box first. I didn't see any remove option. Please help me..

    ReplyDelete
  15. how to add adsense search code to this search box...

    ReplyDelete
  16. When bars like these generate results, is there any way to set them to be sorted by date by default instead of relevance? As the keeper of a progressing professional art blog rather than one of articles, the most current related results which show when sorted by date would be more "relevant" than whatever the default "relevance" algorithm seems to dictate (usually posts from a couple of years ago). Thanks!

    ReplyDelete
  17. Thanks a lot :-) Easily implemented on my blog and it looks gr8 now :-)

    ReplyDelete



Important - If you ask a question make sure you tick the "Notify Me" box below the comment form to be notified of follow up comments and replies.


Hire Us