How To Create A Custom Search Box

In my last post, I spoke of my frustration at being able to find a variety of solutions, most of which either require putting up with intrusive ads or having someone else, i.e. Google, host the results page on their website. Of course, you'd have to pay to remove the ads. However, after doggedly continuing my search for a way to embed the results on my own site without a revolting result, I'm pleased to announce that I've finally found a solution that works for me.

Google Custom Search: the options

When you first arrive at Google Site Search, it looks as if you have to pay or be stuck with an unsatisfactory solution. On the right of the page is a big blue button reading, "Add Google Site Search." Click on that.

In the new window that opens, you have an opportunity to create a new site search engine. Create one. When you've done this, you are offered a control panel. There you have a range of choices that will allow you to either divert your readers to a private area on Google designated as your own search engine, or embed search results onto your web page. You can monetize this by integrating it with AdSense, set search preferences and/or enable special results such as Subscribed Links or Promotions.

From this point on, it's the list of links on your left that you're interested in, since this is where the magic happens. You can customize it as fully as you like from here on.

Look and feel

The look and feel page gives you a choice of layouts and a customize button so you can change the colours on four tabs: Global Styles, Search Controls, Results, and Promotions. I chose the Results Only option. Change the colour codes to suit your theme, then click the "Save & Get Code" button.

The search box

<!-- SiteSearch Google --><form method="get" action="results.html" target="_blank">
<input name="ie" value="UTF-8/" type="hidden"> 
<input name="oe" value="UTF-8/" type="hidden">
  <table bgcolor="#ffffff" border="1" cellpadding="4" cellspacing="0">    <tbody>      <tr>        <td> <input name="q" size="19" maxlength="36" value="" type="text">
<input name="btnG" value="Search" type="submit">
<input name="domains" value="wendycockcroftwebdesign.com" type="hidden"><br><input name="sitesearch" value="" type="radio"> WWW 
<input name="sitesearch" 
value="wendycockcroftwebdesign.com" checked="checked" type="radio">
 wendycockcroftwebdesign.com 

<br>        <br></td>      </tr>    </tbody>  </table></form><!-- SiteSearch Google -->

I put the search box in a table to make it easy to style, but the options for altering the appearance are infinite. The results have been set to open in another page.

You have only to copy and paste the code from the Look and feel page into a page called results.html to have the search results come up there.