Two page, more customizable GCSE for Blogger

Google Custom Search is a powerful tool to search websites. You can get a Blog search from the layout and gadgets section of Blogger.The downside of this is that it isn't that customizable. This will show you how to add your own GCSE to Blogger and have a separate page for results. It's simple.

Log into Blogger, and select "pages" of the blog you want to add search too. Make sure its set to "don't show pages." Then create a new page and name it "search" or "search results."  When the editor comes up click publish and go back to page list. Click "view" and copy the URL. The page section should look like the image at left. Go to Google Custom Search and click "make new search engine."

In "name" enter any thing, and in "sites" enter the URL of your blog. Make sure you select the free option and that you agree to the terms of use. Click next, choose a style, which you can customize. Then click next. DO NOT COPY THE CODE. Go to the sites tab and exclude the URL of your search results page.

Then go to "look and feel" and select the "two page" option. 

Then click "save and get code." In the box where it tells you to specify the URL where the search results are to appear, enter the URL of "search" or "search results."

Copy the code. Go to blogger, then go to "pages" of the blog you are adding search to, and click edit. When you get the code you will have to remove some of it for cross browser compatibility so it will work with Firefox and Opera. This is the search results code. The text highlighted in red you must remove:

<!-- Put the following javascript before the closing </head> tag. -->
<script>
(function() {
  var cx = 'Your Search Engines ID:ak7ru-numse';
var gcse = document.createElement('script'); gcse.type = 'text/javascript'; gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//www.google.com/cse/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s);
})();
</script>

<!-- Place this tag where you want the search results to render -->
<gcse:searchresults-only></gcse:searchresults-only>

CLick HTML in the post editor and paste the code there. It should look like this: 

Click save. Now go to layout, and click "add gadget." Paste the code for the  search box there, click save and you're set!