How to Set Up a Google Search Box on Your Website
By David Karlins, Doug Sahlin
As you build a website, look at a search box as an element in enabling site accessibility and navigation.
The role of a navigation system is not simply to anticipate and respond to what a user might be looking
for: It is to "lead" visitors through your site.
In that context, a search box provides an alternative way for people to find things at your site. Search
boxes are a more flexible, open way to provide access to your site content. But that doesn't mean you
have no freedom, or responsibility, to guide visitors, even as they look for content through your search box.
Embed a Google Search Box
Google packages its free Google Custom Search tools in various ways, but code to create a free Google
search box for your site is available from Google Web Elements.
The code provided is:
<!-- Google Custom Search Element -->
<div id="cse" style="width:100%;">Loading</div>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">google.load('search', '1');
google.setOnLoadCallback(function(){var cse = new google.search.CustomSearchControl();cse.draw('cse');}, true);
</script>
You paste this code anywhere in the <body> element of a web page to place the search box.
Essentially, this tool is a JavaScript file loaded and run from Google's site. The search box, embedded
in your site with the preceding code, will look something like the one shown. You can apply your own
CSS styles to the page that holds the Google search element. And, of course, you can add your own HTML to the page.
To test the Google Web Elements search, you must then upload your page to the web. You can't test it just
saved to your own computer.
The results, when people use the search box, are heavily weighted with external links to Google-advertised products.
This is an excerpt from:
This hefty, 800+ page book is your start-to-finish roadmap for building a web site for personal or professional
use. Even if you're completely new to the process, this book is packed with everything you need to know to
build an attractive, usable, and working site. In addition to being a thorough reference on the basics, this
updated new edition also covers the very latest trends and tools, such as HTML5, mobile site planning for
smartphones and tablets, connecting with social media, and more.
• Packs ten minibooks into one hefty reference: Preparation, Site Design, Site Construction,
Web Graphics, Multimedia, Interactive Elements, Form Management, Social Media Integration, Site Management, and Case Studies.
• Covers the newest trends and tools, including HTML5, the new Adobe Create Suite, and
connecting with social media.
• Offers in-depth reviews and case studies of existing sites created for a variety of purposes
and audiences, such as blog sites and non-profit sites.
• Walks you through essential technologies, including Dreamweaver, HTML, CSS, JavaScript, PHP, and more.
Plan, build, and maintain a site that does exactly what you need, with
Building Websites All-in-One For Dummies.
More Web Design Coding Issues:
• How to Redirect a Web Page Using a 301 Redirect
• Creating a Secure Website Using Secure Socket Layer (SSL)
• Don't Let doors.txt Take Control of Your Email Server
• Syndicate your own content Using aspSyndicator
• How to Set Up a Google Search Box on Your Website
• Update Your Entire Website Instantly Using Server Side Includes (SSI)
• Web Designer's Reference
• RSS Basics
• How to Hide From Robots
• Advantages and Disadvantages of Frames
| 
About BTH
User Agreement
Privacy
Site Map
Contact
News Feeds
RSS Feed
Follow @Stephen Bucaro
General Web Design
