How to reuse the Google Blogger search box as Google Custom Search box

I like the new theme integrated search box design but I hate the standard Blogger search results. I love the Google Custom Search but I don't want to introduced a second search box into my blog and confuses my users or visitors. If only I can reuse the new theme integrated standard Blogger search box as a Google Custom Search box.


Recently Google Blogger team rolled out four (Contempo, Soho, Emporio and Notable) new Blogger theme (previously known as template) and they are excellent. Now I am currently settled with Contempo theme. The new themes comes with new features and one of the features that I use is the integrated search box design into the theme itself. However, The search box is the standard Blogger search function which I think it's does not gives me a good search results whenever I need to search for information from my previous posts. In my previous Blogger theme template, I used Google Custom Search to do the job and the search results are great. The Google Custom Search box code I used was generated from Adsense dashboard after I created a new Custom Search unit.

The Search button to reveal the search box
The Search button to reveal the search box

I like the new theme integrated search box design but I hate the standard Blogger search results. I love the Google Custom Search but I don't want to introduced a second search box into my blog and confuses my users or visitors. If only I can reuse the new theme integrated standard Blogger search box as a Google Custom Search box.

The new Blogger Theme integrated search box
The new Blogger Theme integrated search box

Google Custom Search results page instead of the standard Blogger search results page

I did found a way to do just that! And this is how I did it:

Step 1: Find these set of code in your new Google Blogger theme template.

  <form expr:action='data:blog.searchUrl' target='_self'>
    <b:include name='urlParamsAsFormInput'/>
    <div class='search-input'>
      <input autocomplete='off' expr:aria-label='data:messages.searchThisBlog' expr:placeholder='data:messages.searchThisBlog' expr:value='data:view.isSearch ? data:view.search.query.escaped : &quot;&quot;' name='q'/>
    </div>
    <b:include name='searchSubmit'/>
  </form>

Step 2 : Comment out the whole code block. The comment syntax is highlighted in yellow.

  <!-- form expr:action='data:blog.searchUrl' target='_self'>
    <b:include name='urlParamsAsFormInput'/>
    <div class='search-input'>
      <input autocomplete='off' expr:aria-label='data:messages.searchThisBlog' expr:placeholder='data:messages.searchThisBlog' expr:value='data:view.isSearch ? data:view.search.query.escaped : &quot;&quot;' name='q'/>
    </div>
    <b:include name='searchSubmit'/>
  </form -->

Step 3 : Copy and paste the code block below the commented code block.

<form action='https://www.google.com' target='_self'>
    <b:include name='urlParamsAsFormInput'/>
    <div class='search-input'>
      <input name='cx' type='hidden' value='partner-pub-ID'/>
        <input name='ie' type='hidden' value='UTF-8'/>
        <input name='q' size='55' type='text'/>
    </div>
    <b:include name='searchSubmit'/>
</form>

Step 4 : Replace the partner-pub-ID with your Google Custom Search partner publisher ID which you can get it from your Adsense dashboard after you have created a new Custom Search unit.

Step 5 : Save your theme template code.


Comments

  1. Hello,
    I also custom the contempo blog search using google custom search.
    With my limited knowledge I'm using overlay result, and "replace" input text box with google custom search text box. And with CSE set to "overlay result", than the search result still in the main blog with overlay box on top of it. Still I don't really like the "overlay result".

    Thanks to this post ! Your solution is much neater and simpler than mine (mine has so many cluttering modification).
    Tried yours, it works, but it's completely move the page from blogspot to google.
    Is it what should I expect from this code ?

    Can I have the result in body portion of the blogspot ? So the hamburger menu and search header from contempo theme still in place ?

    thanks in advance,
    singachu

    ReplyDelete

Post a Comment

Thank you for visiting Almost a Technocrat. Due to many spam comments, your comment will be moderated.

Popular posts from this blog