Home
Getting Started
Solutions
Tutorials
Tips
SE Optimization
Customizing OL
Help and How To
Downloads
Services
Frequently Asked Question
Contact Us
 

Google Custom Search

 

Google Custom Search= http://google.com/coop/cse/ or http://google.com/adsense/
 
For Search Box only-results on Google hosted page
1.  Paste the following code into the custom footer module:
 
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">

<xsl:output method="text" omit-xml-declaration="yes"/>
<xsl:template match="/Footer">
<![CDATA[
</form>
 
<form>
]]>
</xsl:template>
</xsl:stylesheet>
 
2.  Copy the Google search bar code and paste it after the </form> tag:
 
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:output method="text" omit-xml-declaration="yes"/>
<xsl:template match="/Footer">
<![CDATA[
</form>
<div class="cse-branding-right" style="background-color:#FFFFFF;color:#000000">
  <div class="cse-branding-form">
    <form action="
http://www.google.com/cse" id="cse-search-box">
      <div>
        <input type="hidden" name="cx" value="017145419153192979054:6klu49onmts" />
        <input type="hidden" name="ie" value="UTF-8" />
        <input type="text" name="q" size="31" />
        <input type="submit" name="sa" value="Search" />
      </div>
    </form>
  </div>
  <div class="cse-branding-logo">
    <img src="
http://www.google.com/images/poweredby
_transparent/poweredby_FFFFFF.gif
" alt="Google" />
  </div>
  <div class="cse-branding-text">
    Custom Search
  </div>
</div>

<form>
]]>
</xsl:template>
</xsl:stylesheet>
 
Note: The Custom Footer module is located under Modules in the Page Editor (same place as the HTML module).  If you do not see it you need to enable Advanced Design Features found in the Page Manager under Site Actions.

 


  
For Search and Results on your site
1.  Follow step 1 through 2 above for putting the search bar on your site.
 
2.  Copy the following code to notepad.
 
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:output method="html" />
<xsl:template match="/">
 
</xsl:template>
</xsl:stylesheet>
 
3.  Copy and paste the search results box code between the <template> tags.
 
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:output method="html" />
<xsl:template match="/">
<div id="cse-search-results"></div>
<script type="text/javascript">
  var googleSearchIframeName = "cse-search-results";
  var googleSearchFormName = "cse-search-box";
  var googleSearchFrameWidth = 800;
  var googleSearchDomain = "
www.google.com";
  var googleSearchPath = "/cse";
</script>
<script type="text/javascript" src="
http://www.google.com/afsonline/show_afs_search.js"></script
</xsl:template>
</xsl:stylesheet>

 
4.  Add <![CDATA[ ]]> tags where shown, like below:
 
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:output method="html" />
<xsl:template match="/">
<div id="cse-search-results"></div>
<script type="text/javascript">
  <![CDATA[var googleSearchIframeName = "cse-search-results";
  var googleSearchFormName = "cse-search-box";
  var googleSearchFrameWidth = 800;
  var googleSearchDomain = "
www.google.com";
  var googleSearchPath = "/cse";]]>
</script>
<script type="text/javascript" src="
http://www.google.com/afsonline/show_afs_search.js"></script
</xsl:template>
</xsl:stylesheet>

 
5.  Copy the entire modified code from notepad and paste it into a custom footer module, on your search results page, make sure have this page set as the URL to the page Google displays the results on.
 
Note: The Custom Footer module is located under Modules in the Page Editor (same place as the HTML module).  If you do not see it you need to enable Advanced Design Features found in the Page Manager under Site Actions.

 

Resources

Updated August 20, 2009



Links

 


 


Search Website