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 Hide From Robots
• Understanding SSL Certificate
• RSS Basics
• Four Must-Have Webpages That Add Website Security
• Seven WordPress Security Tips
• Basic Dynamic Website Security
• Increase Your Traffic by Recovering Your Lost Visitors
• What is a Web Service?
• Web Design Troubleshooting Guide
• What is AJAX?
| 
About BTH
User Agreement
Privacy
Site Map
Contact
News Feeds
RSS Feed
Follow @Stephen Bucaro
General Web Design
