Add HTML, CSS and JavaScript - classic Google Sites
Classic Google Sites provides an HTML Box so you can add more complicated HTML, CSS and JavaScript. This allows more functionality but does not allow all possible JavaScript as the code only works within the HTML Box.
For new Google Sites see these instructions: Insert HTML, JavaScript and CSS - new Google Sites
Recent Update to HTML Box on classic Sites
If your HTML Box has recently stopped working here's what you need to do:
Go to a page where you have an HTML Box
Edit the page
Open the HTML box and you will see the new HTML Box
Set the height and width to something sensible to fit your content
Close the HTML Box
Save the page
Repeat for each page/HTML box that is not working.
Add an HTML Box to classic Google Sites
Navigate to the page where you want to add the HTML, CSS or JavaScript.
Use the Insert menu, then HTML Box.
Once the Insert HTML Box editor appears add the code you want to use.
Google Sites checks the code, while you edit, for errors and will not add the code to the page until correct.
Once finished use the Save button on the Insert HTML Box.
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
Sample Code
<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>
Instructions
Insert a HTML Box as described above in steps 1 to 3
Copy and paste the code above to make a Site Search box (make sure you add the full site URL to the action attribute)
Use the Save button on the Insert HTML Box.
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 Classic Google Site Search Box
Not everything is possible but it brings a whole new world of possibilities.
Screenshots
(click for larger images)
Insert menu - HTML Box
Insert HTML Box - Empty
Insert HTML Box - Unacceptable Code
Insert HTML Box - Acceptable Code
Feedback
Please let us know if this article helped or if you know of of any improvements.
Keep up-to-date
Join the Sites Update Group on the Google Sites Classic Comparison to get email notifications about New Google Sites updates.
Newsletter
Subscribe to our newsletter for emails about all things Steegle.com