Custom Google search

Drupal, WordPress Plugins and good code samples

May 2014

  • Create CSE http://www.google.com/cse/setup/basic?cx=00123237129537399800390:cusdfsdfp1pkwpc
  • Set query parameter  to q_as to avoid conflicts with WordPress and Drupal ?q string
  • Add search box with redirect to another page<!-- BEGIN: Search Form ----- -->
    <div id="search-form">
    <gcse:searchbox-only resultsUrl="/googlesearch" queryParameterName="q_as"></gcse:searchbox-only> </div>
    <!-- END: Search Form ----- -->
  •  Add code on page /googlesearch to display results only
    <gcse:search linktarget="_parent" queryparametername="q_as"></gcse:search>
  • Configure options for colors on the search page and colors of button in search engine
  • Optionally you can link site search to webmaster tools for more complete info

Adding image thumbnails to search results

add code  https://developers.google.com/custom-search/docs/structured_data#addtopage

<!–
    <DataObject type=”action”>
      <Attribute name=”label” value=”Download”/>
      <Attribute name=”class” value=”download”/>
    </DataObject>
    <DataObject type=”action”>
      <Attribute name=”label” value=”Fullscreen View”/>
      <Attribute name=”class” value=”fullscreen”/>
    </DataObject>
  </PageMap>
–>
Replace google  image in search box
<style>
      .gsc-input input {
          background-image: url('/search_files/search_bkgr.png') !important;          
          background-position: right !important;
          background-repeat: no-repeat !important;
} </style>