Add a Custom Google Search Engine

Posted by gerdami on 08 May 2007 12:43, last edited by James Kanjo on 09 May 2010 05:28

Tags: gadget google search search_engine

rating: +15+x

This HowTo describes step by step how to add a customised Google search engine to a Wikidot webpage.

Method 1:

(Use the code from Google CSE: "Edit Search Engine" => "Control Panel" => "Code")


Step 1: "Html" scripting on a page

Step 2: Get the Google CSE Code

Step 3: Select how to display results

Step 4: Final

Additional Instructions: Results hosted on your Wikidot page

Become a Master

- for Step 1:
- for Step 3:

Method 2:

(Use the code from: Google CSE's main page => "Add this search engine to your blog or webpage"; in other words:"Google CSE gadget + [[embed]]")

Drawbacks of this method

- clutter: the search field looks like this:

Method 1 Method 2
maki_m1.Png maki_m2.Png

- not properly displayed in some browsers:
The gadget does not get properly displayed in Opera:


This gadget uses the [[embed]] function described Embedding help page. However, it is difficult to find it in the Google Gadgets library at

(1) Go to to create your customised Google search engine

(2) Follow Google's instructions (It's so easy !)

(3) Go back to and look for My search engines
step1.jpg(4) Click on homepage
step2.jpg(5) And then on Add this search engine to your blog or webpage

(6) Click on the Get the code button

(7) Paste it on your wikidot page as follows:

<script src=";synd=open&amp;w=275&amp;h=65&amp;title=Wikidot&amp;border=%23ffffff%7C3px%2C1px+solid+%23999999&amp;output=js"></script>

(8) And the result is:

About the CSE given as an example above:

This customised search engine currently searches 7 sites:

Google CSE Support

Method 3:

The method below is slightly easier and allows you to specify whether the search is just on your own site or across the whole internet. It uses a codeblock and iframe combination.


Enter the codeblock below on your page. You can change the presentation, for example remove the border, by altering the CSS properties and values in the div. By using target="google_window" this opens the results in a new window/tab. If you want the results to open in the same page then remove the target=

You will also need to change the url to your own and the text in the value="" checked /> Search Only<br /> line.
As you can see, you can also specify whether the search defaults to your site, in which case you add the word "checked". Or you can search the web by default, in which you enter "unchecked".


[[code type="html"]]

<form method="get" action="" target="google_window">

<div style="border:1px solid #468259;padding:4px;width:20em;">
<table border="0" cellpadding="0">
<input type="text"   name="q" size="25"
 maxlength="255" value="" />
<input type="submit" value="Google Search" /></td></tr>
<tr><td align="center" style="font-size:75%">
<input type="checkbox"  name="sitesearch"
 value="" checked /> Search Only<br />





then underneath the codeblock, on the same page, add an iframe to reference that codeblock:

[[iframe frameborder="0" scrolling="no" width="350px" height="75px"]]

Replace YOURSITE and YOURPAGE with the name of your site and the page where you have put the codeblock. If it is the first or only codeblock on that page then use /code/1, if it's the second then use /code/2 and so on.

This gives the result below:

About this page

Rate this solution

If you think this solution is useful please increase the rating.

rating: +15+x


gerdamigerdami. Please visit his/her userPage.

makimaki. Please visit his/her userPage.

RobElliottRobElliott. Please visit his/her userPage.

Add a New Comment

Related articles


Add a New Comment
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-Share Alike 2.5 License.