Google Custom Search Plugin
Google Custom Search plugin allows you to add a search box to your site for a custom search provided by Google and shown in your own blog. The advantage of using this plugin is that the search results will be provided by Google and their great search engine. The results are drawn from only the websites you specify when setting your search engine up at Google. You will also be able to earn money from the ads Google shows in the search results.
What you need to do:
- Create a custom search engine at Google, entering your blog in the list of sites to search.
- After doing that, you will be able to manage your engine.
- Choose the look and feel of your search box and search results, matching your blog's design
- Go to the code tab, choose "Host results on your website" and "iframe".
- Enter your blog address/generic.cfm as the URL where the results should appear
- Choose the ads placement
- Copy the Search Box code and the Search Results code and save for later.
- Active the plugin in your blog admin
- Go to Settings > Google Search
- Paste the Search Box code and the Search Results code in the text areas provided.
You can paste the box code as is or customize the HTML to match your blog's design.
13 responses to "Google Custom Search Plugin"
Laura on October 12, 2008
Yes, somehow, the post lost the link it was supposed to have at the end.
jonese on February 27, 2009
Does this work with 1.3.1? i tried to implement it after a 1.3.1 update and i can't get it too remember the google code...
jonese on February 27, 2009
ok i got it working. for some reason the code folder and associated code_<string>.txt file wasn't getting created.. manually created and viola it works
Laura on February 27, 2009
I'm glad you got it working. I'll check to see if there is anything wrong with the file saving just in case.
Greg on June 23, 2009
Haa anyone been able to style the search box to match their site?
Mark Aplet on June 23, 2009
@Greg You can style the search form any way you need too using CSS.
Greg on June 23, 2009
I only know how to use css on html forms. This Google Custom search is called via js like this:
google.load('search', '1'); google.setOnLoadCallback(function(){ new google.search.CustomSearchControl('...
How would a guy style something like that?
google.load('search', '1'); google.setOnLoadCallback(function(){ new google.search.CustomSearchControl('...
How would a guy style something like that?
Laura on June 24, 2009
Greg,
There is only a javascript file that gets included after the actual form. There is a <form> tag and inputs you can style. The javascript is not really needed for the form to work (although I don't know whether Google's terms force you to leave it there), so you can remove it and that would remove Google's branding. You can see in this same page that the form has been styled to match this site.
There is only a javascript file that gets included after the actual form. There is a <form> tag and inputs you can style. The javascript is not really needed for the form to work (although I don't know whether Google's terms force you to leave it there), so you can remove it and that would remove Google's branding. You can see in this same page that the form has been styled to match this site.
Mark Aplet on June 25, 2009
If you use firebug, and firefox, you can view the "rendered" html. This is different than the html you see when you do a view source. JS can of course effect the DOM after the page has loaded adding html that the browser understands and styles that you would not otherwise see.
Greg on June 25, 2009
Laura/Mark, I don't understand. I don't have any form tag in my code. I have this:
<!-- Google Custom Search Element -->
<div id="cse" style="width:100%;">Loading</div>
<script src="http://www.google.com/jsapi"; type="text/javascript"></script>
<script type="text/javascript">google.load('search', '1'); google.setOnLoadCallback(function(){ new google.search.CustomSearchControl('013959616596213686306:iusd9b2bolo').draw('cse'); }, true); </script>
http://luceconsulting.net/
<!-- Google Custom Search Element -->
<div id="cse" style="width:100%;">Loading</div>
<script src="http://www.google.com/jsapi"; type="text/javascript"></script>
<script type="text/javascript">google.load('search', '1'); google.setOnLoadCallback(function(){ new google.search.CustomSearchControl('013959616596213686306:iusd9b2bolo').draw('cse'); }, true); </script>
http://luceconsulting.net/
Mark Aplet on June 25, 2009
Greg, I emailed you.
Please take this to the forum where people can help you. This page is not read by many people.
Please take this to the forum where people can help you. This page is not read by many people.
Pritesh on October 05, 2009
I don't know why but it doesn't create IFrame for me. When I search for any tag it just give me blank
Try http://blog.thecfguy.com/ to see problem. can you please let me know where I am doing wrong?
Try http://blog.thecfguy.com/ to see problem. can you please let me know where I am doing wrong?
Mark Aplet on October 11, 2008