An Easy Way to Add a Search Bar to Your Web Site or Blog

Thu, Sep 17, 2009, by catlord

Web Design

Your web site or blog has several dozen links to on-site articles, entries and various other pages, and now you want to install a basic SEARCH BAR that will by using keyword inquires, return these pages from only your site.

You can write your own complicated code of course and deal with server-side coding and database issues, or you can use this easy way to get your page links returned on SEARCH using the strength of Google’s search engine.

Let’s call the site called “www.MY-SITE.com” that you want to add a SEARCH bar to.  Visitors to “MY-SITE.com” are greeted by the page “index.html” as per the normal manner of web pages. This is the page that you want to have a SEARCH bar on. This is your main or home page where all the links to other pages and documents in your site are listed either in a navigation bar or as a list of title links to other pages.

First Step : Create a Simple FORM for your index.html Page

In your html document “index.html” where you want your SEARCH bar to appear, place the following code: (without the whitespace after/before the angle-brackets)

< form action=”google.php” method=”post” >
< input type=”text” name=”search” />
< input type=”submit” value=”Search” />
< /form>

Style the form however you wish with padding, width, margin, etc. Let’s add some style to this, as follows: (again, without the whitespace after/before the angle-brackets)

< form action=”google.php” method=”post” style=”width:300px; margin:0 auto 3px;” >
< input type=”text” name=”search” style=”width:230px; border:1px solid silver; padding:2px 2px 6px” />
< input type=”submit” value=”Search” />
< /form >

This will give a length of 300 pixels and will be centered on your page. This “300px” allows for the width of the input bar AND the “submit” button that we are creating with “input type=”submit” value=”Search” and for good measure, a few pixels left over.

The user-input box (SEARCH box) will be 230 pixels wide and have a 1-pixel silver border around it and a visually pleasing padding around the blank space where the user will type in the text s/he wishes to search for. SAVE this page with the current name “index.html” and upload this to your domain “www.MY-SITE.com.”

Next you need to create a *php document that we will call “google” since we are using the Google search engine for the SEARCH bar.

Second Step : Create a PHP Document

Open a blank document in your html or text-editor and paste the following code with no other text or comments on the page. Don’t try to re-type it, it is too easy to make an error :

< ?

$website = “www.MY-SITE.com”;
$search = $_POST['search'];
$search = str_replace(” “,”+”,$search);
$search = stripslashes($search);
header(”Location: http://www.google.com/search?q=site%3A$website+%22$search%22&btnG=Google+Search”);

? >

(again, without the ‘whitespace’ between the “<” & “?” and the “?” & “>

Note the first line which cites your domain “www.MY-SITE.com.” This is important as it will instruct Google from where to SEARCH for pages to return upon user request.
SAVE this short document as “google.php” and upload this to the same directory as your “index.html” page. Make sure that your html editor or host does not change the extension by default to “google.php3” as this will not work. The page must end with *php. If it is changed to *php3, manually rename the extension to be “.php

We’re done with this part now.

Next, we have to submit your domain (”www.MY-SITE.com”) to Google to get your links indexed and make this “SEARCH FORM” work. For Google to return results from your page, googlebot must first crawl & index all the links and pages in your domain from the information in the *php page that you created (specifically, from the information provided in the first line $website = “www.MY-SITE.com”; of the document “google.php”)

Your site may already be indexed by Google and this next step may be unnecessary but it is better to suggest it anyway and get this working as soon as you can.

Third Step : Submit Your Site URL to Google

(screen capture image by author)

Go to http://www.google.com/addurl/ and add your domain (in this case, www.MY-SITE.com, complete with the http://” as per instruction) to the URL box, shown in the image and link given above.

Now, wait a few days for googlebot to find and index your site and all the URLs therein. It is not guaranteed that Google will in fact index your pages but it is highly probable that Google will do so. From their site, Google says this on the matter of crawling/indexing your suggested URL:

Only the top-level page from a host is necessary; you do not need to submit each individual page. Our crawler, Googlebot, will be able to find the rest. Google updates its index on a regular basis, so updated or outdated link submissions are not necessary. Dead links will ‘fade out’ of our index on our next crawl when we update our entire index.

In short, googlebot will find “index.html” in the suggested URL “www.MY-SITE.com” and, if it is deemed worthy, will crawl and index all (or many/most) of the links therein. You do not have to submit every link on the index page to Google. It will find them and know of their existence in time, and any URL links removed from “index.html” will eventually be ‘dropped’ from these indexes as well.

Within a few days, the SEARCH bar on your site will return a URL result on any searched term that is a match and only from the links that exist in your site. This is a fairly easy way to install a SEARCH bar feature to your site without having to do extensive backend coding and it gets your pages indexed fairly fast. Being ‘found’ on Google is helpful in its own right, and this makes your pages be ‘SEARCHable’ from your site.

I hope you find this tutorial useful.

Read how to optimize your PageRank by getting good backlinks and using inline-lines within your articles to increase traffic to your site, blog or artcile.

10
Liked it
4 Comments For This Post
  1. James DeVere Says:

    Great work. This is just the work I need for my Web stuff. Will bookmark. j

  2. Melody SJAL Says:

    Very useful info, thanks.

  3. Joe Poniatowski Says:

    Thanks for the tips. I’m always looking to learn more about html, css, etc.

  4. Bo Russo Says:

    I will mess with this, thanks.

Leave a Reply
comments powered by Disqus