Skip to Main Content

Google Search Boxes: Banner search box

The banner search box is created by combining the custom header code for the LibGuide guide or group with the code from the Google Custom Search Engine.

A LibGuide administrator must create the banner search box. Once you have the code ready, contact a LibGuide administrator for assistance.

LibGuide Administrators:

Lisa Raymond

Heather Westerlund

Create the search results guide

You need the friendly URL from the Search results guide, so make the guide and create the friendly URL.  Then come back here.

Create the search results guide

Custom header code

LibGuides uses a standard header to provide a consistent look and feel across the LibGuide websites.  The custom search box portion of this code is modified for each department's search box.

The header code for the custom search box is below.  The highlighted sections are customized for each search box.

<!-- HEADER SEARCH BOX -->

<!-- Custom search box - This search box is different for each department. -->    <div id="search-box-container">                

<div id="s-lg-guide-header-search">

<div id="s-lg-guide-search-box">

<form id="s-lg-guide-search-form" method="GET" action="/library/search" role="search">

<div class="input-group input-group-sm">

<label class="sr-only" for="s-lg-guide-search-terms"></label>

<input type="hidden" name="cx" value="000538561323142501329:irq7fm_ae-k"></input>

<input type="hidden" name="cof" value="FORID:10"></input>

<input type="hidden" name="ie" value="UTF-8"></input>

<input id="s-lg-guide-search-terms"class="form-control" type="text" placeholder="Search the library's website" name="q"></input>

<span class="input-group-btn">

<button class="btn btn-default" type="submit">Search</button>

</span>

</div>

</form>

</div> 

</div>

</div>

Google Custom Search Engine

We use the Google Custom Search Engine to set up the search parameters and customize the look of the search results.

You must log into the Google Custom Search Engine using the Google account associated with the website.  This is usually the same account as used for Google Analytics.

  1. Go to the Google Custom Search Engine and log in with the appropriate Google account.
  2. Click New Search Engine.
  3. Enter the URL/s of the site to search in the Sites to Search box, for example.
  • Search one guide: enter guide URL e.g. https://academicguides.waldenu.edu/resources/googleanalytics
  • Search guides from a specific group e.g. https://academicguides.waldenu.edu/library/*
  1. Continue adding URLs until you have all the sites you want to search. You can add any URLs from anywhere. However, you should only search websites you own or for which you have permission to search.  Do not include non-Walden content in the search box.
  2. Enter a name in the Name of the search engine box. This is used to identify the search engine in the list; it is not used external to Custom Search Engine.
  3. Click the Create button.
  4. On the next page, click the Control Panel button to modify your search engine.
  5. On the Edit search engine page, click the Look and feel link in the left column.
  6. Select Results only from the options.
  7. Click Save.
  8. Click the Themes tab at the top of the section.
  9. Select the Classic theme from the options.
  10. Click the Save button.
  11. Click the Search Features button in the left column.
  12. Click the Advanced tab.
  13. Change the Results sorting option from On to Off.
  14. Click Business in the left column.
  15. Under Advertising Status, select "Do not show ads on results page".
  16. Click Look and Feel in the left column.
  17. Click the Save & Get Code button.
  18. Copy the code and put it somewhere you can find it later, such as Notepad.  It should look something like this:

Modify the custom header code

It is time to add pieces from the Google Custom Search Engine (CSE) code to the custom header code, as well as make a few other modifications. 

 

Search results guide:

Enter the friendly URL for the Search Results guide in the form id line.

<form id="guide-search-form" style="PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; DISPLAY: inline; PADDING-TOP: 0px" method="GET" action="search results guide URL" role="search">

 

VAR CX number:

Locate the var cx number in the CSE code.  Replace this into the value for the first input. Be sure to retain the quotes.

CSE code: var cx = '007499281105655634226:faqh8g457vc';

Custom header code: <input type="hidden" name="cx" value="007499281105655634226:faqh8g457vc"></input>

 

Text placeholder:

Enter the appropriate department name in the "search-box-guide-terms" input id.  This is the text in the search box.

<input id="search-box-guide-terms" type="text" placeholder="Search the <department's> website" name="q"></input>

 

Send the code to the LibGuide administrator:

Once you have modified the custom header code, you are ready to send it to the LibGuide administrator.  Send both the modified custom header code and the Google Custom Search Engine code to the LG admin.