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.

google custom search results below headerIt 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!

33 comments to "Display Custom Search results on a separate page"

Dave,  December 29, 2010 at 3:17 PM    

Hello,

1. Please always put a Demo for the feature you introduce.

2. Is there any way to improve comments section of blogger blogs? It is very weak! specially for quoting and replying other commenters' comments.

3. Thanks for you good blog, but why don't you have an email or contact page on your blog?!

Best,

Dave.

Antoine December 29, 2010 at 8:19 PM    

Hi Greenlava,

Thank your for the tips !


I'll try the trick now.

Regards

Anup December 29, 2010 at 8:35 PM    

A very nice trick! Thanks for the tweak. I'll use this shortly! I'll try to customize my search result page :)

jiff0777 December 30, 2010 at 4:56 PM    

I already have readmore system and when i search the results comes like this. http://tecland.blogspot.com/p/search-results.html?cx=015978769324040734892%3Azqi-gv-kepg&cof=FORID%3A11&ie=UTF-8&q=how+to+train+your+dragon&sa=Search&siteurl=tecland.blogspot.com%2F

Please help me to complete this!

Greenlava December 30, 2010 at 11:30 PM    

@jiff0777
Your read more doesn't take pages into consideration. You need to update it. Use this one:
Blogger Auto Read more with thumbnail

jiff0777 December 31, 2010 at 1:07 AM    

I have created a new blog with your tip. That really amazing and have a look. It really works and this is the example. thank you very much ones again...
http://abcsearch.blogspot.com

Greenlava December 31, 2010 at 1:35 AM    

@Dave
Sorry for the late reply. Your comment went the spam box.
1. Please re-read the post.
2. I guess we're stuck with that for now.
3. There is a Contact tab on the navigation bar.

Mohd Isa December 31, 2010 at 12:58 PM    

can u give me some demo? i need to see, if can. please put the picture to. thanks for the info. :)

Greenlava December 31, 2010 at 2:30 PM    

@Mohd Isa
Search something using the search box on the navigation bar. The results will show up on a separate page (as described in this tutorial).

Ian,  January 2, 2011 at 1:44 PM    

Great tutorial. Shame the posts in the search results don't appear in any particular order, and that some posts are omitted. Seems ironic that Google, the king of search engines, can't fix this years-old issue.

Syarih January 3, 2011 at 1:00 PM    

I like Google search but my Google Chrome always crash. Erm...hope Google improve it next version.

gamerap January 4, 2011 at 7:41 PM    

Thanks.

akubiomed January 12, 2011 at 11:48 AM    

Hi Green Lava, it is really work for me. Last time when I make customize search engine gave error not found. Not it is given result as I want it :-)

Ayush Chand January 19, 2011 at 9:51 AM    

Thanks. I was looking for it!

Anonymous,  February 16, 2011 at 1:39 AM    

Can someone help me? I'm trying to do this, I made a page called Search Results and because I had the search feature in the navbar at the top I didn't do the look and feel thing. I added the URL from my search result page in place of the google...cse link and copied the code from step 2. into the code just before [/form]

I also added that same line of code to the html of the search result page and published it.

But when I do a search, it just puts an empty page there.

Is there anyone who can help? Maybe step by step for someone already with the navbar custom search menu?

littlekariblue@gmail.com

Greenlava February 19, 2011 at 5:38 PM    

@Anonymous
What is your blog URL?

Anonymous,  March 21, 2011 at 6:55 AM    

Thank you!!! You saved me!

Anonymous,  March 26, 2011 at 6:13 AM    

thanks for your tips , i love this blog :)
i've try your above tips . and now , how to change width of result page .. ?

Anonymous,  March 26, 2011 at 6:50 AM    

yeah .. i've fix
just add this style code above div to change width of frame search result

[style type="text/css"]
#cse-search-results iframe {
width: 600px;
}
[/style]

change [] with <>
600 is value of width , u can change the value if u want

Keith Johnson II September 1, 2011 at 11:43 PM    

Thanks for all the help. this article solved all my problems.

abdul November 6, 2011 at 4:07 AM    

On my older custom search engines, I had two options to choose from under,

Look and feel ---> Choose a hosting option

The two options being "Search element" and "Google-hosted page"

For a long while, my option was set to the default, i.e. "Google-hosted page." A few days back, I decided to try out the "search element" option. However, now I find that I can't switch back to the "Google-hosted page" option. As in - the option now is just "search element" and under that I find various options like "full width," "compact" and the last being "Google-hosted." However, if I select this "Google hosted" option, I find that my search results page looks different. It looks more like the search element results page.

Can't I get the original "Google-hosted page" option? The search results when I was using this option used to look more like the traditional Google search results, not like the search element results page. Anyone know what I am talking about? If you do, please let me know if there was an update and now we no longer get the "Google-hosted page" option which displays the traditional Google search results from the main home page of the CSE?

Szslm Khaitran December 25, 2011 at 5:29 AM    

thank you so much. 'how to ad search box in blogger' wasted my about 3 hours. and now when i got it i thought first i must say you thank you...

Blogger Style January 7, 2012 at 4:58 AM    

The hosting option is not there, here the story. Is there another way?

You can also take advantage of the Javascript Developer's Guide to
Google Custom Search no longer supports the iframe hosting option. We recommend the "Two page" or "Results only" layouts in Search element as the new options. Check out our blog post for more information.
http://code.google.com/apis/customsearch/docs/ui.html#hosting

Can you

BD Help Line February 2, 2012 at 10:42 PM    

i have created a new blog site but i don't know how to plugin facebook button in my blog page . Anybody help me by showing your helpful hand to me an get me the element code of this

Greenlava February 3, 2012 at 12:32 AM    

@BD Help Line
You can find tutorials on installing various buttons by going to social media category page.

Bernard May 16, 2012 at 2:05 PM    

Putting the code in a page that i created is not working. I followed the instructions but end up failed.

Greenlava May 17, 2012 at 11:51 PM    

@Bernard
I've updated the tutorial to keep up with current developments. Please try again.

Bernard May 18, 2012 at 10:14 AM    

I can't put it done. I want to make the search just like on this site. I have tried the two page but when i searched, the search box will move in the post page where the results are. What did you choose for your search layout?

Greenlava May 18, 2012 at 4:19 PM    

@Bernard
I still use iframe (it has been deprecated, but still works for the time being).
To omit the search box from results, use the "Results only" option.

Srinivasarao Bellamkonda June 22, 2012 at 9:17 PM    

srinivas B
i have to create google custom search and it will be display in frames. and i have to display links in same page.
But that link will be opened the static data also displayed in same page,
The major problem is how can i go to back in ipad or ios

Anonymous,  January 1, 2013 at 6:46 PM    

works fine

Dennis van Leeuwen February 12, 2013 at 2:30 AM    

One thing I don't understand. Here on BloggerSentral you use the same search-bar BUT I don't see a SEARCH-RESULTS PAGE on the top? How do you select where to send the output of the query?

Greenlava February 15, 2013 at 5:51 PM    

@Dennis van Leeuwen
We do have the search results (static) page, we just didn't add it to the menu bar.

Post a Comment

We love to hear from you! Leave us a comment.

To ensure proper display, HTML/XML/Javascript need to be escaped first using this escape tool.

Click to go to top Click to comment