How do you customize Google Custom Search Engine (CSE)?

Have you tried to customize the Google CSE search box to fit your website theme, and having difficulty implementing it? You're not alone. I've browsed Google CSE documentation for some time, but this information is buried under the hood and took me a while to figure this out. This is a 2-page Search & Results page design. You'll style the form element how ever you wish to design.

Search Box:





<form id="cse-search-box" class="search" title="CSE Search" 
    action="/search-results.html">
<input type="text" name="q" size="" />
<input type="submit" name="sa" value="go" />
</form>

Search Results: Get this code from your CSE control panel.

<script>
(function() {
var cx = '012345678901234567890abcdefghijkl';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
        '//www.google.com/cse/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(gcse, s);
})();
</script>
<gcse:searchresults-only linktarget="_self"></gcse:searchresults-only>

Comments

Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.