Extras & Tools

Google Search

If you have a large site with a lot of pages, a search feature can help visitors find the information they are looking for. One of the simplest ways to add a search feature to your website is using Google Custom Search, a tool that allows users to search the pages of your site, and it only takes a few minutes to set up.

Once you have signed in, there is a wizard that will take you through the three steps needed to add the search feature to your site. The exact steps vary as the tool is updated, but the screenshots and steps below indicate how it was used when this book was released.

Step 1

The first screen asks you to give your search engine a name and a description.

You then define the sites that you want this search engine to cover.

You can see I added www.htmlandcssbook.com/* which indicates that I want it to search all of the pages on www.htmlandcssbook.com.

You will see on this screen that there is an option for a paid version of Google Custom Search - this is particularly useful if you do not want Google's AdWords did not appear on the side of your search results (which may point to a competing web site).

Step 2

In the second step you can select from a pre-defined set of color schemes.

You can even specify your own set of colours for headings, text, and links.

Here you can see that I have selected colors that match the color scheme of the rest of this site.

Step 3

In the third and final step you are presented with some code that you can copy and paste into your HTML page or CMS.

You can see the search for this site in action underneath the next screen shot, and use it to find things on this site.

As you will see, this example shows the results underneath the search box on the same page.

Step 4

At the time of writing, if you wanted a search box on all of your pages, and the search results on a different page, then you had to save your search engine then go back in and edit the "look and feel" options.

This allows you to select different layouts. You should select Two page, then press save and get the code lower down on the page.

You will be given the code for the search form, and the code for the results page.

Here you can see the search box I created for this site: