Integrating Google Co-op Custom Search Engine (CSE) with your blog.

Google Co-op's Custom Search Engine (CSE) gives a great amount of flexibility in seamlessly integrating the search functionality into your blog. Here I will show a simple way to integrate the search functionality in a blogger (new version) blog.

If you have not already created a Custom Search Engine then create one now here.
Once you create your Custom Search Engine, you'll get the following confirmation page:

If you have already created a custom search engine, click My search engines.
Click control panel
Click Code
Now if you do not want the search results to be blended along with your website / blog layout...
1. Under Search box code for your website select how you want the Google logo to appear. If you do not want a google branding on your website/blog then leave it as it is. We shall remove it later.
2. Click Save Changes
3. Click anywhere on the box below the line which says "Paste this code in the page where you'd like your search box to appear. The search results will be shown on a Google-hosted page." The entire contents of the box will be highlighted which means it has been selected and now you can copy it straight to the page / template where you want the search box to appear.
If you want the search results to be integrated into your website or blog...

Note: If you are using the new version of blogger and want the search results to appear as if they were on the same blog, you'll have to create another blog with the same layout template. For example for HashOut, I have created another blog with the url searchhashout.blogspot.com with the same header and footer elements but nothing in between.
1. Click Search box and search results code for your website
2. Select how you want the Google logo to appear. If you do not want a google branding on your website/blog then leave it as it is. We shall remove it later.
3. Under "Specify the URL of the page on your site where you want the search results to appear:" enter the url of the web page or blog where are going to paste the search results code. If you're using the new version of blogger enter the URL of the blog you created for your search results.
4. Select how you want advertisements to be displayed in your search results. You can later even monetize from the ads displayed in your search results by linking your AdSense account with your Google Co-op CSE.
5. Click Save Changes
6. Click anywhere on the box below the line which says "Paste this code in the page where you'd like your search box to appear." The entire contents of the box will be highlighted which means it has been selected and now you can copy it straight to the page / template where you want the search box to appear.
7. Now select and copy the code from the box below the line which says "Place this code in the page you'd like your search results to appear." and paste it into the HTML source code of the page on your website or blog. If you're using the new version of blogger insert the search results code into the template of your new blog you created for search results, in a place where you'd like it to appear. I inserted the code in between the header and footer elements.

Now if you do not want the Google branding on your search box then you can remove the line highlighted in red below:


<!-- Google CSE Search Box Begins -->
  <form id="searchbox_012345678901234567890:abcdefghijk" action="">
    <input type="hidden" name="cx" value="012345678901234567890:abcdefghijk" />
    <input type="hidden" name="cof" value="FORID:11" />
    <input name="q" type="text" size="40" />
    <input type="submit" name="sa" value="Search" />
    <img src="http://google.com/coop/images/
google_custom_search_smnar.gif" alt="Google Custom Search" />
  </form>
<!-- Google CSE Search Box Ends -->