Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

About BTH User Agreement Privacy Site Map Contact News Feeds

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:
• Web Designer's Reference
• How to Hide From Robots
• How to Set Up a Google Search Box on Your Website
• How to Strengthen Website Authentication
• Various Types of Website Hacking
• Seven WordPress Security Tips
• How To Effortlessly Use Streaming Audio
• Video - Optimizing the Order of Scripts and Styles
• Understanding SSL Certificate
• Create a Simple, Effective PHP Form for Your Web Site