Chris Bensen: Adding Google Search To Your Website

I just added Google search to my blog and website but there were a few tweaks I had to make to the default HTML generated by the Google wizard. The default width was too wide for the sidebar so I figured I'd let others know what I did to save anyone the 20 minutes it took to make it look the way I wanted.

First you need to create a Google AdSense account. Once you have an AddSense account go to AdSense Setup and choose AdSense for Search. Here is a screen capture of the my defaults:

The default search will look pretty close to this depending on what options you provide. From there the default HTML generated by the Google wizard was:


<form method="get" action="http://www.google.com/custom" target="_top">
<table border="0" bgcolor="#ffffff">
<tr><td nowrap="nowrap" valign="top" align="left" height="32">
<a href="http://www.google.com/">
<img src="http://www.google.com/logos/Logo_25wht.gif" border="0" alt="Google" align="middle"></img></a>
<br/>
<input type="hidden" name="domains" value="chrisbensen.blogspot.com"></input>
<label for="sbi" style="display: none">Enter your search terms</label>
<input type="text" name="q" size="22" maxlength="255" value="" id="sbi"></input>
<label for="sbb" style="display: none">Submit search form</label>
<input type="submit" name="sa" value="Search" id="sbb"></input>
</td></tr>
<tr>
<td nowrap="nowrap">
<table>
<tr>
<td>
<input type="radio" name="sitesearch" value="" checked id="ss0"></input>
<label for="ss0" title="Search the Web"><font size="-1" color="#000000">Web</font></label></td>
<td>
<input type="radio" name="sitesearch" value="chrisbensen.blogspot.com" id="ss1"></input>
<label for="ss1" title="Search chrisbensen.blogspot.com">
<font size="-1" color="#000000">chrisbensen.blogspot.com</font></label></td>
</tr>
</table>
<input type="hidden" name="client" value="pub-4398465119811197"></input>
<input type="hidden" name="forid" value="1"></input>
<input type="hidden" name="ie" value="ISO-8859-1"></input>
<input type="hidden" name="oe" value="ISO-8859-1"></input>
<input type="hidden" name="cof" value="GALT:#008000;GL:1;DIV:#336699;VLC:663399;AH:center;BGC:FFFFFF;LBGC:336699;ALC:0000FF;LC:0000FF;T:000000;GFNT:0000FF;GIMP:0000FF;FORID:1"></input>
<input type="hidden" name="hl" value="en"></input>
</td></tr></table>
</form>

And here is how I tweaked it. I removed the image at the top and removed the options to search the web or my site because this was too wide.


<form action="http://www.google.com/custom" target="_top" method="get">
<table border="0" bgcolor="#ffffff">
<tr><td nowrap="nowrap" valign="top" height="31" align="left">
<br/>
<input value="chrisbensen.blogspot.com" name="domains" type="hidden"/>
<label for="sbi" style="display: none">Enter your search terms</label>
<input maxlength="255" id="sbi" value="" name="q" size="20" type="text"/>
<label for="sbb" style="display: none">Submit search form</label>
<input id="sbb" value="Search" name="sa" type="submit"/>
</td></tr>
<tr>
<td nowrap="nowrap">
<input id="ss1" checked value="chrisbensen.blogspot.com" name="sitesearch" type="hidden"/>
<input value="pub-4398465119811197" name="client" type="hidden"/>
<input value="1" name="forid" type="hidden"/>
<input value="ISO-8859-1" name="ie" type="hidden"/>
<input value="ISO-8859-1" name="oe" type="hidden"/>
<input value="GALT:#008000;GL:1;DIV:#336699;VLC:663399;AH:center;BGC:FFFFFF;LBGC:336699;ALC:0000FF;LC:0000FF;T:000000;GFNT:0000FF;GIMP:0000FF;FORID:1" name="cof" type="hidden"/>
<input value="en" name="hl" type="hidden"/>
</td></tr></table>
</form>