« A Link Widget I Really Like, And A Hack to Use it In Advanced Templates | Main | MajikWidget Launches Public Beta Today »

John T. Unger

How To: Put Google Search in Your New Menu Bar

John T. Unger May 29, 2006

I've had a few requests for instructions on how to add a Google search bar into the top menu. I've been delaying the post until I can get it to work across all browsers… right now, it doesn't display properly in Internet Explorer but seems fine in all the other browsers I've tried.

For those of you who don't care about Explorer users (just kidding) I'm going to go ahead and post the hack I used to add search to the menu. Actually, what I'm really hoping is that someone cleverer than I am can figure out a better way to add the search field to the CSS menu so that it does work right in IE. The top menu hack is here, if you want to review it before playing with the search field.

I first tried adding the google code as a list item in the menu template. I wanted it at the far right, so I just put it at the end of the menu items. When I tried that, it displayed just below the menu and the background images for the menu buttons were behind the search field instead of the menu. So I moved it out of the list and pasted the code after the closing tag for the list, before the closing div tag for the menu. Same problem. So I enclosed the google code in it's own div tag, used some CSS for alignment and text style and pasted it in just above the menu list as shown below. That works great (for some reason) except that in IE it displays left justified, behind the first menu item. Personally, I'm confused.

So this is what it looks like in my template at present (with some of the menu code so you can see where I put it).

<div id="chromemenu">
<div style="float: right; font-weight: bold; color: #494949; padding: 4px; ">
<!-- SiteSearch Google -->
<form method="get" action="http://www.google.com/search">Search: <input type="text" name="q" size="5" maxlength="150" style="width:150px;" /><input type="hidden" name="domains" value="http://www.typepadhacks.org/" /><input type="hidden" name="sitesearch" value="http://www.typepadhacks.org/" /></form>
<!-- SiteSearch Google --></div>
<li><a href="http://www.typepadhacks.org/2006/03/start_the_purpo.html">Manifesto</a></li>

When I figure out a better way to do this, I'll replace this post with clearer instructions. Suggestions are muy welcome.

Oh, and if you're using basic templates and want to add google search to a typelist, you can find great instructions for that in this post at Everything TypePad.

More Like This: Advanced Templates , Basic Templates , Blog Tools , Hacks for Navigation , Typelists + Sidebars


Julie says:

I use IE6 and it looks fine to me.

Julie says:

This worked great for me. Is there a way so that it opens in a seperate window without having to set all outside links to open in a seperate window?

john t unger says:


You could try using MajikWidget's tool that makes all links open in new windows, though I'm not sure if that would work because the search is form-based. If you try it, let me know whether it does work.

Darla says:

I've enjoyed using your hacks and have spent 2 days redesigning my site. (shameless plug). I do have a concern though when it comes to this. According to Google Adsense altering the script shouldn't be done. Would this tweak have any affect on that at all?

The comments to this entry are closed.


TrackBack URL for this entry:

Listed below are links to weblogs that reference How To: Put Google Search in Your New Menu Bar:

typepad hacks is a typepad featured weblog typepad hacks is listed on Alltop social media


Email RSS Comments  
Subscribe to TypePad Hacks with email Read TypePad Hacks posts via RSS Join the conversation at TypePad Hacks via RSS (comments feed) subscriber count



Twitter Logo
    follow typepadhacks on twitter

    Read and reply to the 100 most recent comments at the TypePad Hacks Community Page



    Powered by TypePad
    Member since 03/2005

    TypePad Status

    Creative Commons License