Websites‎ > ‎Google Sites How-tos‎ > ‎

Google Sites - HTML Box - Add more HTML, CSS and JavaScript

posted 6 Mar 2012, 18:38 by Stephen Hind   [ updated 5 Jun 2014, 08:26 by Unknown user ]

Google Sites - Add more HTML, CSS and JavaScript

Google Sites now provides an HTML Box so you can add more complicated HTML, CSS and JavaScript, e.g. forms, background images and some onMouseOver events, in the HTML Box.  This allows more functionality but does not allow all possible JavaScript as the code only works within the HTML Box and does not work with your site content outside of the HTML Box.

Instructions

  1. Navigate to the page where you want to add the HTML, CSS or JavaScript.

  2. Use the Insert menu, then HTML Box.

  3. Once the Insert HTML Box editor appears add the code you want to use.

  4. Google Sites checks the code, while you edit, for errors and will not add the code to the page until correct.

  5. Once finished use the Save button on the Insert HTML Box.

  6. Use the Save button to save the page and view the page with your new code.

Notes

The HTML Box will not allow all code, e.g. you cannot make calls to external JavaScript files, but you can use JavaScript embedded on the page.

Examples

Site Search Box anywhere on the page

Instructions

  1. Insert a HTML Box as described above in steps 1 to 3

  2. Copy and paste the code below to make a Site Search box (make sure you add the full site URL to the action attribute)

    <form id="sites-searchbox-form" action="[SiteURL]/system/app/pages/search">
      <input type="hidden" id="sites-searchbox-scope" name="scope" value="search-site" />
      <input type="text" id="jot-ui-searchInput" name="q" size="20" value="" aria-label="Search this site" autocomplete="off" />
      <input type="submit" id="sites-searchbox-search-button" class="goog-inline-block jfk-button jfk-button-standard" tabindex="0" value="Search this site" />
    </form>
  3. Use the Save button on the Insert HTML Box.

  4. Use the Save button to save the page and view the code.

You will see a search box that looks just like the site search box, a working example follows (remember this is not a gadget and is on the page).

Working Site Search Box

Not everything is possible but it brings a whole new world of possibilities.

Feedback


Screen Shots

(click for larger images)

Insert menu - HTML Box

Google Sites - Insert menu - HTML Box

Insert HTML Box - Empty

Google Sites - HTML Box - Empty

Insert HTML Box - Unacceptable Code

Google Sites - HTML Box - Unacceptable Code

Insert HTML Box - Acceptable Code

Google Sites - HTML Box - Acceptable Code


Comments