Skip to Main Content

Google Search Boxes: Search results page

The search results page has one box with two widgets in it.  The widgets are:

  • Google search box
  • Google search results

Create the search results guide

You need a guide to display the search results.

  1. Create a guide and add it to the appropriate group.
  2. Apply the standard Walden Guide Side-Nav Template (PRIMARY) template.
  3. Name the guide: Search <department's> website

 

Once you have created the guide, create the guide's friendly URL following this convention:

https://academicguides.waldenu.edu/careerservices/search

Search box widget

The first widget is the Google search box.  This gives people a way to re-run the search if they aren't happy with the results, as well as providing a search box to which you can link.

The Google search box widget is created using the same CSE code as you used for the banner search box.  There is custom code for the widget, which is similar to the custom header code.

 

Create the widget code:

Make the same changes to the code below as to the custom header code.

<!-- WIDGET SEARCH BOX -->
<!-- Custom search box - This search box is different for each department. -->
<div id=la_widget_home>
    <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="/library/search" role="search">
        <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>
        <div class="ui-widget">
            <input id="search-box-guide-terms" type="text" placeholder="Search the library's website" name="q"></input>
            <button id="search-box-guide-button" type="submit">Search</button>
        </div>
</div>

 

Create the search widget:

  1. Create a box and name it: Search <department name>'s website
  2. Add a Media/Widget content item.
  3. Name the content item: Google Search Box:<department name>
  4. Paste the search code box into the Embed Code box.
  5. Click Save.

 

Here's an example of the search box widget.

Google search results

The second widget provides the search results.  This box uses the code from the Google Custom Search engine.

  1. Under the search box widget, add another Media/Widget content item.
  2. Name the content item: Google Search Results Code: <department name>
  3. Paste the Google Custom Search code into the Embed Code box.
  4. Click Save.

 

Here is an example of the Search Results widget.

Test it!

You are ready to test.  Hopefully you will get search results!

Note: It may take some time for Google to index your site.  For the best results,

  • publish all guides at least one week before you want the search to work and
  • submit the URL to Google for indexing (talk to a LibGuide administrator for help with this).