Customize Google custom search
This is the second part of the google custom search setup guide. It deals with more customization of the search feature. If you haven't read the first part, read it here, set up Goolge custom search.
Go to Google custom search website and click manage your existing search engines.
On the next page you will see your search engines listed. Click the control panel written in front of the search engine name.
The next page shows the control panel from which you can edit all the things about the search engine you created. Click look and feel on the left side.
First look at the hosting options. There are three options listed.
- Search element.
- Iframe.
- Google hosted page.
Search element displays the search results on the same page where the search query was typed. When the user searches something he/she is not taken to a new page and the existent data is pushed to show the results. The users can close the search results if they want.
Layout: In search element hosting three layouts are provided.
- Full width
- Compact
- Two column
Full width shows the results below the search box, both in a single column. Compact also shows the results and search box in the same but narrow column. Two column shows the search box in one column while the results on the other column. The default hosting option enabled by google is full width search element.
Iframe displays the search results in a new page of your website. When some one do a search on your site he/she is taken to that new page on which the search results are served. This is the most appropriate method to show search results. For example, the search engine implemented on this site is also iframe based.
Google-hosted page displays the search results on a typical google search result page. You just include the search box on your site and the result page is hosted by Google.
At this point you can customize the appearance of the search box, change the font, font color or background color of the search results also.
I will demonstrate iframe hosting option because this is the most better option to display results and also needs a bit more customization. So if you can understand iframe hosting, you can implement the other two easily. So select iframe and hit 'save' and then 'Get code' button.
On the next page you will see the options about where to place ads on your search result page. Right will place the ads on the right, Top and Right will place the ads on top and right side of the search results and Top and Bottom will place the ads on top and bottom of the search results. Select any type you want keeping in mind the space available on your search result page.
You will now need to enter the url of the page on which you want the search results to be displayed. Just make a web page similar to the design of your website or if you have made a template of your design, just make a page from that template. Name that page something like search-results.html and enter the complete url in the box. For our example the url will be www.example.com/search-results.html.
This page also gives you two code boxes. Copy and paste the search box code at the place where you want to show the search box. Generally this code will be placed on every page of your website.
Now copy and paste the search result code at the place where you want the search results to be shown but only on the page you created specifically for search results.
Reminder: Always give the url and ads serving location before copying the code.
A little more optimization
Control the width/size of the search box
If you want to place the search box in a fixed width column which is less wider than the default width of the search box, the search box makes the column expand enough to fit itself in. This surely is a problem for the column layout.
To fix this problem, you should reduce the width of the search box. Look at the search box code that you copied from the google's site above and find the line:
<input type="text" name="q" size="31" />
You can then change the value of size="31" to a smaller value to reduce the width or to a bigger value to increase the width.
Control the width of the search results block
If you show the search results in a fixed column layout which is less wider than the default width of the results block, than the results block will expand the column to fit itself in. This will cause your layout to distort.
To fix this, reduce the width of the search result block. Look at the search results code you copied and find the line:
var googleSearchFrameWidth = 600;.
Change the width 600 to a lower value to reduce the size. The lowest effective value is 500. Any value lower than this will not have any effect on the width of the block.
So, go ahead, setup google's custom search feature on your website and improve you site's performance. Good luck!
Related:
Set up Google's custom search on your website (part I)
Making money from your website
Design layout of your website
Link to this page :
Copy and paste the following code in an html document to link to this page,