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

Popular posts from this blog