Putting Google Custom Search Results on Their Own Blogger Page

I added a Google custom search to CSS Bakery, but wanted the search results
to display on a page of their own without other CSS Bakery posts appearing before or after.

To do this I created a placeholder post (through the usual Posting Create interface). This may be a little kludgey but I could not think of another way to do this in Blogger given their "iframe" interface in their code. After publishing the dummy post, I clicked on the title to get the unique URL of this post, which is:

http://cssbakery.blogspot.com/2009/02/search-12.html

I then went to my Google custom search and set this URL for displaying search results. I pasted the Google search results code into my template just after the start of the main-wrapper div:

<div id='main-wrapper'>

(google search results go here)

After that, the search results are correctly displayed at the top of the placeholder post.

However, I didn't really want the placeholder post itself, and the "post comment" section to show up at the bottom of the page after the search results. So, I used Blogger Widget Tags to hide the post, but without affecting the display of any other posts.

You can read about Widget Tags in Blogger Help at: Blogger Widget. It's basically Blogger's simple templating language that gives you if-else, looping, and a simple form of "function call", including parameter passing. Here's how I used it to hide my placeholder post on the search results page:

1. I clicked "Expand Widget Templates" in the HTML view of my template.
2. I searched for: blog-posts (which is the main part of the template that displays posts)
3. Just before the line

<b:loop values='data:posts' var='post'>

I added the following:

<b:if cond='data:blog.url != "http://cssbakery.blogspot.com/2009/02/search.html"'>

4. I closed off the if statement with a b:if, just after the end of loop (i.e. just after b:loop)

This change says if the current URL is NOT that of my placeholder post, then do the following. And what follows is the loop that displays all the posts. The code looks like this:

<b:includable id='main' var='top'>
  <!-- posts -->
  <div class='blog-posts hfeed'>
    <b:include data='top' name='status-message'/>

    <data:adStart/>
    <b:if cond='data:blog.url != "http://cssbakery.blogspot.com/2009/02/search.html"'>
    <b:loop values='data:posts' var='post'>
      <b:if cond='data:post.dateHeader'>
        <h2 class='date-header'><data:post.dateHeader/></h2>
      </b:if>

        other template code not shown...................

    </b:loop>
    </b:if> 

When I got the results I was looking for, I went back to the original dummy post through Blogger Edit Posts feature and deleted its title and body text. It still shows up among the other posts but without a title so it no longer looks like a post.