Web Talk

Believe it or not but a couple of days ago I got an issue which, despite it looked  trite, it took me almost an hour and a half to figure how to solve it. The case was quite simple. I wanted to integrate a Google Custom Search box at the end of my posts and I wanted its results to be displayed on a specific page. Basically, when my visitors used the Google Search they didn’t have to leave my blog. The steps explained in the wizard procedure were quite simple and made me picture a quick and easy result. However, when the search results were displayed within the page of my blog they were too wide, overriding my blog’s theme. Here is an example of what I got. 

As you see, both the ads and the results overrode my blog’s theme and this caused them to go right under it. Weird, huh? Despite this issue presented a series of easy solutions, none of them worked properly. I framed the code Google provided into a table, I used CSS styles attributes, but nothing to do. Google Search Result always returned witht the same issue. The solution came when, among the different settings available in the wizard page, I saw that the ads could be placed in different positions namely: right, top and right,  top and bottom. This positions are rendered with different numbers on the code provided by Goolge. Here is the code to display the Google Serch box inside the theme:

<form action=”http://www.webtlk.com/search-results/” id=”cse-search-box”>
<div>
<input type=”hidden” name=”cx” value=”XX738XXX7243299XXX09:2i7XXXX” />
<input type=”hidden” name=”cof” value=”FORID:9″ />
<input type=”hidden” name=”ie” value=”UTF-8″ />
<input type=”text” name=”q” size=”25″ />

</div>
</form>

<script type=”text/javascript” src=”http://www.google.com/coop/cse/brand?form=cse-search-box&lang=en”></script>

As you can see the bold code (<input type=”hidden” name=”cof” value=”FORID:9″ />) contains the number 9. This number serves the ads on a certain position around the search results. Here is the numbers available and where they render the ads:

9 = Right

10 = Top and right

11 = Top and bottom

Well, it is sufficent to change the value 9 with  the number  11 to solve all the issues and force the search results to stay within my theme. As a matter of fact, by displaying the ads on top and bottom of a page you will let the code respect the value you assigned to another piece of code which displays the results on a special page you previously  created on your blog.  Here is the  code I am talking about:

var googleSearchIframeName = “cse-search-results”;
var googleSearchFormName = “cse-search-box”;
var googleSearchFrameWidth = 800;
var googleSearchDomain = “www.google.com”;
var googleSearchPath = “/cse”;
// –></script>
<script src=”http://www.google.com/afsonline/show_afs_search.js” type=”text/javascript”></script>

The bold code (var googleSearchFrameWidth = 800; ) contains the default number 800 and it is assigned by the wizard procedure. At the beginning of this story I just thought that it was sufficient to tweak  this number and assign the code a smaller value to solve my issues. Well, in a sense this was true because I really had to change this number, but what I missed completely was to change the value contained in the other piece of code.  Hope this will help you.

By the way, if you want to implement a Google Custom Search in your blog or website, visit Google Custom Search Engine.