Search This Site
 

Add a Search Box

If you have a large site, you want to consider adding a search box to your site. There are a number of free ones available or if you are using paid hosting, there may be one available through the host. The free ones I have used are listed below. Each is customizable to reflect the "look" of your site.

  • FreeFind Here you sign up to "Add a search engine to your site." You will need to enter your page URL and your e-mail address.. Your password and setup instructions will be e-mailed to you. My Family Genealogy site uses FreeFind.
  • PicoSearch Here you sign up for your search engine. You will need to set up all the requested information. You'll then see the web page from which you manage and customize the Picosearch tool for your website. I have used this in the past.
  • Atomz Search  - Just fill in your email address and you will receive instructions via return email. The website for the Unitarian Universalist Fellowship of Harrisonburg Virginia uses Atomz as the search engine.
  • Google Free
  • FrontLook is not a free program but is available for both FrontPage and Expression Web. You cannot use this with any of the RootsWeb servers.

Once you decide which of the search engines you want to use and have the code to paste into your page, where should it go? I would place the code for your search box on every page of your site in a conspicuous place near the top.

You will probably find the search box will not validate without your "tweaking" the code.  Each of the boxes below has been tweaked so the code will validate as xhtml. For html code, you will need to delete the closing /. xhtml coding requires an element to be self-closing or opened and then closed.

I prefer to place the search box at either the top of the page or as part of the left side navigation using a very simple box styled using css. Examples of the search box inserted into a left navigations <div>

 

Google Search Box

only search Genealogy Web Creations

<p class="center"><strong>Google Search Box</strong></p>
<div style="border: 1px solid black; padding: 4px; width: 20em; text-align: center; margin: 0px auto 0px auto">
<table border="0" cellpadding="0">
<tr>
<td>
<input maxlength="255" name="q" size="25" type="text" value="" />
<input type="submit" value="Google Search" /></td>
</tr>
<tr>
<td align="center" style="font-size: 75%">
<input checked="checked" name="sitesearch" type="checkbox" value="http://www.genealogy-web-creations.com" />
only search Genealogy Web Creations<br /></td>
</tr>
</table>
</div>

Atomz Search Box

Search:

<p class="center"><strong>Atomz Search Box</strong></p>
<div style="border: 1px solid black; padding: 4px; width: 20em; text-align: center; margin: 0px auto 0px auto">
<form action="http://search.atomz.com/search/" method="get">
<input name="sp_a0" type="hidden" value="sp10038698" />
<input name="sp_advanced0" type="hidden" value="1" />Search:
<input name="sp_q0" size="10" />
<!-- The "Search" button --><input type="submit" value="Go" />
</form>
</div>

FreeFind Search Box


powered by FreeFind

<p class="center"><strong>FreeFind Search Box</strong></p>
<div style="border: 1px solid black; padding: 4px; width: 20em; text-align: center; margin: 0px auto 0px auto">
<form action="http://search.freefind.com/find.html" method="get" target="_self">
<input name="id" type="hidden" value="39665208" />
<input name="pageid" type="hidden" value="r" />
<input name="mode" type="hidden" value="all" />
<input name="n" type="hidden" value="0" />
<input name="query" size="15" type="text" />
<input type="submit" value=" Search " /> <br /><span class="smalltext">powered
by <a href="http://www.freefind.com">FreeFind</a></span></form>
</div>

Styling the Search Box

Once you have added the code for your search box and validated it, you can then add some styling to it. This is more easily done if the search box is placed inside <div> tags as is the one at the top of this page and the one on http://huuweb.org/ Both of those are place inside

<div id="logoright">Code for search box</div>

The id of logoright is then styled by the following style rules

#logoright { float: right; width: 150px; margin: 30px 20px 0px 0px; font: bold .85em Georgia, "Times New Roman", Times, serif; background-color: #FFF; color: #6295C6; text-align: right; }

The search button itself is styled by adding a class to the code class="search"

<input class="search" name="Action" type="submit" value="Go" />

and adding style rules for the class

.search { background-color: #3E719E; color: #FFFFFF; font-weight: bold; }

If you want the input box to have a background image (which appears as a solid color), create a small seamless image to use as the background, create a style use.

.gwc { background-color: #BDC7C6; background-image: url('../images/form-background2.jpg'); background-repeat: repeat; }

Apply the style to the code <input class="gwc" maxlength="30" name="query" size="10" value="" />

A search box added to the left side navigation would be done basically the same way. The code for the search is placed inside a <div> with the id search

<div id="search">Code for Search box </div>

Style rules added to your style sheet

#search { text-align: center; margin: 3px auto 8px auto; font-size: .8em; }
#search p { margin-bottom: 0px; } This removes the bottom margin so the Search This Site sits just above the search box itself.

An image was created for the background of the input box and a style created

.cf { background-image: url('../images/form-bg.jpg'); background-repeat: repeat; }

and the class added to the code <input class="cf" maxlength="30" name="query" size="10" value="" />

No class was created for the button styling as I wanted the default color for this particular one.


Updated January 2010