How to make site specific Google search box

Here is some code you can use to add Google's search functionality to your website. You can add both a standard Google search box that will search the web at large (the first example) or a site-specific search box that will search only pages within a specific URL (the second example). If you want to restrict searches to your own site, use the second example and provide your site’s URL as the searchable domain.

You'll need an API key from Google. They are freely available for non-commercial applications.

General Google search box :

<!DOCTYPE html>
<head>
    <meta charset="utf-8" />
        <title>My GAjax Search</title>

        <script src="http://www.google.com/uds/api?file=uds.js&v=1.0&key=YOURKEYHERE" type="text/javascript"></script>
        <script language="Javascript" type="text/javascript">
        //<![CDATA[
        function OnLoad() {

          // Create a search control
          var searchControl = new GSearchControl();

          // create a search object
          searchControl.addSearcher(new GwebSearch());

          // tell Google where to draw the searchbox
          searchControl.draw(document.getElementById("search-box"));

        }

        GSearch.setOnLoadCallback(OnLoad);

        //]]>

        </script>

    </head>

<body>

        
        <div id="search-box">

        </div>

</body>
</html>

Site specific Google search box

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

    <head>

        <title>My GAjax Site Search</title>

        <script src="http://www.google.com/uds/api?file=uds.js&v=1.0&key=YOURKEYHERE" type="text/javascript"></script>

        <script language="Javascript" type="text/javascript">

        //<![CDATA[

        function OnLoad() {

          // Create a search control

          var searchControl = new GSearchControl();


         // create a search object

          var siteSearch = new GwebSearch();

        siteSearch.setUserDefinedLabel("YourSite");

        siteSearch.setUserDefinedClassSuffix("siteSearch");

        siteSearch.setSiteRestriction("example.com");

        searchControl.addSearcher(siteSearch);

          // tell Google where to draw the searchbox

          searchControl.draw(document.getElementById("search-box"));

        }

        GSearch.setOnLoadCallback(OnLoad);

        //]]>

        </script>
    </head>

    <body>
        
        <div id="search-box">

        </div>
    </body>

</html>

How to make site specific Google search box

General Google search box :

Site specific Google search box

0 komentar:

Posting Komentar