Search steegle.com
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 25 Mar 2013 05:15 by Stephen Hind ]

Google Sites now provides a 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 will allow a lot more functionality but does not allow all possible JavaScript as Google sanitises the code entered and 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

Please enter a search term

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

Availability

You can get this feature now on stand-alone/consumer/personal Google Sites and Google Apps domains with the Rapid Release track enabled.


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



 RSS Feed of my Google Sites How-Tos


Authored by

Comments