Add search to any blog

Make sure not to miss the updated information and comments below.

Walter asked for the code to add a search box to his blog. I use a tiny PHP script for universal browser compatibility, but there's a Javascript method that will work on any server.

Somewhere in your blog template, include this code to create the search box. This code is customized for Walter's blog; you just need to replace the two mentions of bikefridaywalter with the URL of your own blog.

<form id="b-search" name="b-search" action="http://search.blogger.com/">
  <input type="text" id="b-query" name="as_q" />
  <input type="hidden" name="ie" value="UTF-8" />
  <input type="hidden" name="bl_url"
   value="http://bikefridaywalter.blogdrive.com/" />
  <input type="submit" name="Search" id="b-searchbtn"
   value="Search BikeFriday Walter"
  onclick="document.forms['b-search'].bl_url.value='http://bikefridaywalter.blogdrive.com/'"
   />
</form>

The result of the above code will look like this:

This code is based on the code for the search box in the Blogger.com navbar and uses Google's Blogsearch search engine. JavaScript is usable on any server. The disadvantage is that many people disable JavaScript on their browsers. This code will work for any blog that Google Blogsearch knows about, not just Blogger.com blogs. Note that if you run a blog with Blogger.com and use the Blogger.com navbar, you already have a search box at the top of your blog.

You can get fancy with the interface if you want and search by author, by tag to create a primitive categorization scheme, and so forth.

Update: This code does not work with the Safari browser. Does the Blogger Navbar search box work when you surf with Safari?

Update 2: There's an easier way to do this that's free of Javascript.

Tags: blogger blogsearch tips tools javascript form code