Google search box for Radio Userland weblogs

| 2 Comments | 1 TrackBack

In Radio Userland's discussion forum, Martin asks about adding a Google search box that will search only his Radio Userland weblog:

Hi. Sorry if this is a common question: Is there a definitive resource to show me how to add a Google search feature to my UserLand weblog? Its easy to add one to search the WWW; I'm struggling re: just my weblog. The various links through searching UserLand seem to contradict one another. A definitive resource must be useful for all ''new kids on the block' such as 'me'? Posted by Martin in the land where petrol costs just go up and up :-(

Google actually provides sample code for search boxes that can be freely included on your weblog. (This code should be added to your #homeTemplate, #template, and #desktopWebsiteTemplate templates.)

A Google search box, such as the one displayed here on my weblog, can be set up easily enough (using the code provided by Google) if you want to search a domain. Unfortunately, a Radio Userland weblog's home page is not at the root of a domain. Google's sample search box can be set up to search radio.weblogs.com (which would include *all* Radio Userland weblogs), but not radio.weblogs.com/0123456 (one specific Radio Userland weblog).

Google does provide a way to restrict search results to urls with specific words contained in the url. This is done by using the "inurl:" operator in the search query. By combining a site search of radio.weblogs.com with the inurl:usernum (where usernum is the user number of the Radio Userland weblog), Google's search results will be effectively restricted to ones only from the weblog you want to search.

Here is the sample code for a basic Google search box:

  <!-- Search Google -->
    <center>
    <form method="get" action="http://www.google.com/search">
      <table bgcolor="#FFFFFF"><tr><td>
        <a href="http://www.google.com/">
          <img src="http://www.google.com/logos/Logo_40wht.gif"
            border="0" alt="Google" align="middle" />
        </a>
        <input type="text" name="q" size="25" maxlength="255" value="" />
        <input type="submit" name="btnG" value="Google Search" />
      </td></tr></table>
    </form>
    </center>
  <!-- Search Google -->

This code will provide a search box that works exactly the same way as if you had entered a search on Google's home page.

To restrict the search results only to web pages hosted at radio.weblogs.com (the weblog's domain), this is done by adding "site:radio.weblogs.com" to a Google search query. The "site:" parameter can be included with the form's search queries by adding the following code to the search form code above:

        <input type="hidden" name="sitesearch" value="radio.weblogs.com" />

To further restrict the search results only to web pages from a single weblog hosted at radio.weblogs.com, this is done by adding 'inurl:0123456" to a Google search query (where "0123456" is your Radio Userland user number). The "inurl:" parameter can be included with the form's search queries by adding the following code to the search form code above:

        <input type="hidden" name="hq" value="inurl:0123456" />

The final code would then look like this:

  <!-- Search Google -->
    <center>
    <form method="get" action="http://www.google.com/search">
      <table bgcolor="#FFFFFF"><tr><td>
        <a href="http://www.google.com/">
        <img src="http://www.google.com/logos/Logo_40wht.gif"
            border="0" alt="Google" align="middle" /></a>
        <input type="text" name="q" size="25" maxlength="255" value="" />
        <input type="hidden" name="sitesearch" value="radio.weblogs.com" />
        <input type="hidden" name="hq" value="inurl:0123456" />
        <input type="submit" name="btnG" value="Google Search" />
      </td></tr></table>
    </form>
    </center>
  <!-- Search Google -->

And this is the search box you would see, ready to search for pages only on your Radio Userland weblog:

There are a number of ways that this form can be customized, depending on your preferences:

1. Google has a variety of logos in different sizes and background colors that can be freely used with your search form. These logos can be found on Google's Official Logos page. To use a different logo, replace the source url in the <img> tag above ("http://www.google.com/logos/Logo_40wht.gif") with the url of the logo you would like to use.

2. The width of the input box can be widened or shortened by increasing or decreasing the size="25" parameter in the line <input type="text" name="q" size="25" maxlength="255" value="" />.

3. The text on the "Search" button can be changed to whatever you want by editing the value="Google Search" parameter in the line <input type="submit" name="btnG" value="Google Search" />.

4. The sample code above displays a wide horizontal form, while many Radio Userland users may prefer a narrower, vertical form (for use in their weblog's links column, for example). The search form can be made vertical by first deleting the <table>, <td>, and <tr> tags in the form. (Delete this line: <table bgcolor="#FFFFFF"><tr><td> and this line: </td></tr></table> from the form.) Then add a <br> tag after the <img> link (after the </a> tag) and another one after the <input type="text"> tag.

5. Search results can be made to open in a new window by adding target="_blank" to the <form> tag.

Here's a sample of a customized Google search form, using all of the steps described above:

And here's the HTML code which makes the new search box:

<!-- Search Google -->
    <center>
    <form method="get" action="http://www.google.com/search" target="_blank">
      <a href="http://www.google.com/">
      <img src="http://www.google.com/logos/Logo_25wht.gif"
        border="0" alt="Google" align="middle" /></a><br>
      <input type="text" name="q" size="15" maxlength="255" value="" /><br>
      <input type="hidden" name="sitesearch" value="radio.weblogs.com" />
      <input type="hidden" name="hq" value="inurl:0123456" />
      <input type="submit" name="btnG" value="Search" />
    </form>
    </center>
  <!-- Search Google -->

Now that you know how to set up a Google search form to search only a Radio Userland weblog and how to configure its appearance, have fun with it!

1 TrackBack

Search now added to my site from Adventures in home working on July 11, 2004 4:07 PM

Thanks to google, and this useful post http://tweezersedge.com/archives/2003/09/000151.html You can now search my site from its home page! Read More

2 Comments

I dropped the code into my template but now my template is looking odd. The links on the right side of my page have been moved to the downside of the page.
Any suggestions why this is happening?

Thanks in advance,

NK

Think I have fixed it. I don't know how but it looks quite ok now.