Display Custom Search results on a separate page

How did you do to display the search results on separate page of your blog like that? That’s a question asked by a reader recently. (If you don’t have the slightest idea what the reader was talking about, see the results page in action by searching something using the search box above. You’ll know what he meant). This tutorial will answer that question.

It will explain how to make your Google Custom Search results show up on a (Blogger) dedicated static page , instead of on the same page or some page on Google. This tutorial is applicable only for search box created in Google Custom Search or AdSense for Search. It’s not going to work with Search Box gadget added via Layout.

Update May 2012: Google Custom Search deprecates iframe option and Blogger is removing old UI. Tutorial is updated accordingly.

Here we go:

I. Create a search result page

1. Go to Pages > Add New > Blank Page to create a page for displaying the search results.
2. Put in the title. Don’t put any content yet inside the page, leave it blank.
3. Publish it.
4. Copy the URL of the page.

II. Creating Google Custom Search codes

1. Go to Google Custom Search (opens in a new tab/window) and select your search engine.
2. Click the Look and Feel link.
3. On top of the page, under Choose A Layout heading you’ll be provided with several layout options -Full-width, Compact, Two column, Two page, Results only and Google-hosted.
   • Choose Two page option if you want to include a search box in the search results page.
   • Choose Results only option if you already have a search  box and it appears on all pages e.g. the search box is located on the navigation bar or in the header.
4. Choose or customize a style from 6 available styles -Default, Bubblegum, Green Sky, Espresso, Shiny, Minimalist and Classic.
5. Scroll down and click the Save button. After that click the Get Code button.
6. In the Get code page, enter the URL of your search page in the Specify search results details text box.
7. You will be provided with a code(s) to be added to your blog.
   • If you chose Two page option you will be given two sets of code. The first is the code for the search box, and the second one is the code for search results.
   • I you chose Results only you will only get the code for search results.

III. Applying the codes

Applying/modifying search box code

You have two options:

1. If you chose Two page option and want to add a search box that looks the same as previewed on Look and Feel page, just copy the Custom Search element code and paste it in a HTML/Javascript gadget.
2. If you’ve already have a custom search box (like the one explained in Add Custom Search box to navigation bar) and want to keep it as it is, you just need to update the code. Here’s how:
   1. Change the existing URL of the action attribute from http://www.google.com/cse to the URL of your search results page. 
   2. And insert this line right before </form>:
      

      <input type="hidden" name="cof" value="FORID:10" />

Applying search results code

1. Copy the search results page code (from the second box).
2. Go back to post editor to edit your search results page.
3. Switch to Edit HTML mode and paste in the code.
4. Publish.

That’s all to it! You can now test the search box, see if it works.

You should see your search results occupy your the post area. Want to customize the page –i.e. remove the sidebars, or make the search results occupy the full width of blog area? Easy, read about it here: Apply different layout/styling to static pages.

Enjoy!