Adding Google Custom Search to your Blog

Adding Custom Search to your Blogspot Blog enhances its value and allows visitors to sift through your posts with ease. Adding Google Custom Search is not simple or for the fain at heart. It requires tons of patience, a keen eye and a good comfort level at playing with code. For a live demo, I have added the same to my blog as well, so feel free to try it out! Adding Google Custom Search is not simple, here are the steps that are required:

1. Create a static page on Blogger for displaying Search Results
2. Sign Up for Google AdSense - if you want to earn money
3. Sign Up for Google Custom Search
4. Update the static page with Google Custom Search Code
5. Remove side bar & meta-data displayed on the static page
6. Add search box on side bar

So here goes, get ready to get down & dirty with the details ...

1. Create a static page on Blogger

Create a static page on Blogger for displaying Search Results. Go to Posting > Edit Pages and click on the New Page button to create a new static page. Set the title as Search Results or anything appropriate and for now, enter placeholder text Search Results in the page. View this page and note down the URL of this page - this will be used in the later steps when configuring Google Custom Search.

2. Sign Up for Google AdSense

If you want to earn some money through the searches that are done on your site, you will need to sign-up for an adsense account. Here I am assuming that you already have one - if not, then just go ahead and sign up for one.

3. Sign Up for Google Custom Search

From inside the AdSense account, click on the link AdSense for Search and then follow the steps below:

• Click on Single Page link at the top to view all the options in one page
• Search Type: Select Only sites I select
• Selected sites: If you have more than one site, enter one site per line for each of the websites you want to include in the search.
• Optional Keywords: Enter keywords separated by space if you want to give hints to the search engine.
• Opening of search results page: Select Open results within my own site and in the box below for Enter URL where search results will be displayed, enter the URL of the static page created in Step 1 above.
• Ad Location: You can choose whichever option you like, but I personally prefer to go for Top and Bottom
• Name Your Search Engine: give a name for your custom search engine
• Fill in all the other remaining fields as per your requirement
• Press the Submit and Get Code button to get the Javascript code that you need to put into the static page

4. Update static page on Blogger

Go to Posting > Edit Pages and click on the Edit link for the static page created above. Then:

1. Copy code from Search box code and paste it here
2. Enter a break tag <br>
3. Copy code from Search results code and paste it here

5. Remove side bar & meta-data displayed on the static page

Now this is the tricky part which requires you to change the template. You can skip this step if you are OK with having the widgets display on the right column. Note: take a backup of your template before proceeding!
Go to Layout > Edit HTML and check the box Expand Widget Templates. Then add the line: to the following 3 places:
To remove the Post Metadata (Author, Tags, Time) from Static page
Lines 1 and 19 in this code snippet

       <b:if cond="data:blog.pageType != "static_page"">
   <div class="postmeta">
   <b:if cond="data:top.showAuthor">
      Posted by
      <span class="fn"><data:post.author/></span>
      </b:if> |
   <b:if cond="data:post.labels">
   Posted in
        <b:loop values="data:post.labels" var="label">
          <a expr:href="data:label.url" rel="tag"><data:label.name/></a><b:if cond="data:label.isLast != "true"">,</b:if>
        </b:loop>
      </b:if> |
   <b:if cond="data:top.showTimestamp">
      <b:if cond="data:post.url">
      Posted on <data:post.timestamp/> 
      </b:if>
      </b:if>
   </div>
      </b:if>
 </div>

To remove the "Continue Reading" or similar link from Static page
Lines 2 and 7 in this code snippet

 <b:if cond="data:blog.pageType != "item"">
        <b:if cond="data:blog.pageType != "static_page""><br/>
 <div class="postmetadata">
    <p><a expr:href="data:post.url">Continue Reading</a></p>
 </div>
    </b:if>
    </b:if>

To remove the right Column widgets from Static page
Lines 2 and 14 in this code snippet

 <!-- Body_right -->
<b:if cond="data:blog.pageType != "static_page"">
    <div id="body_right">
   <!-- Sidebar Ads -->
...
...
   <!-- /Sidebar Ads -->
   
   <!-- Sidebar -->
   <div id="sidebars">
...
...
      </div>
</b:if>
   <!-- /Body_right -->

6. Add search box on side bar

To add search box on side bar, go to Layout > Page Elements and click on the Add a Gadget link on the bottom right. Add a HTML/JavaScript widget and in the window that opens up, enter the following:

• Title: Search or something similar
• Content: Here paste the code from Google Custom Search / AdSense for Content from the box Search box code

And after these long & complicated steps, you should have your Google Custom Search with AdSense on your Blogger Blog ready!!!