May 29, 2006
This article reprinted from the the TypePad Hacks Weblog. The original article can be found online:
© 2008, John T Unger
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 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>
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.