Friday, 14 December 2012

Install Custom Google Search on your website

This tutorial
- shows how to create a custom Google search on your website.
- hence there is no need to design your own search box for your website. Just register with Google custom search and use google custom search box.

How to use:

The download pack contains two files - hover_zoom.html and the plugin file hover_zoom_v2.min.js.

1. Register with Google custom search

Navigate to the Google custom search site.
Click the "create new search engine" link.

Mention your website in the "Sites to search" textbox. If you want only a specific section of your domain to be searched, you may specify something like* in the box. Also you may specify multiple sections of a website or multiple websites to be included in the search. Mention one entry per line if you specify multiple search sources.

On the next page, choose a style and customize it as required. Click Next when done.

Now, Google will present you the code. Copy the <script> part of the code inside your <head> tag.

Joint Layout:

If you want the search box and the search results to get displayed together as shown below, copy the tag <gcse:search></gcse:search> on the html page that needs search.

Detached Layout:

If you want the search box in a separate part (Example: the right corner of your page) and the search results to get displayed in the central body part as shown below, then use separate tags <gcse:searchbox></gcse:searchbox> to display the search box and <gcse:searchresults></gcse:searchresults> to display the search results.

Here's a sample code for Detached layout.

Let me know if you face any issues.


  1. Win Exciting and Cool Prizes Everyday @, Everyone can win by answering simple questions. Earn points for referring your friends and exchange your points for cool gifts.

  2. Which is better to custom in subdomain or create another directory inside the website ?

    Thanks for help.

  3. sir, I need a custom design for the Google search, or custom css, where I can get it? would you please make google search custom design