Google Sites is an incredibly useful tool for companies using Google Apps, as you can personalize content, access, and more based on your users Google Apps logins, which means they don’t have to log in to a separate system just to access your company’s intranet, for example. This can lead to a higher rate of adoption and usage.

But editing Google Sites has always been seriously painful, the platform lacks many features of a true content management system. Google Sites took a big step forward recently by allowing native usage of CSS, javascript and jQuery. Previously, this could be done by uploading custom Google Gadgets, but this update makes the feature more obvious and easily accessible.

Check out the video for more details on using CSS, javascript and jQuery in Google Sites.

If you enjoyed this video, be sure to sign up for theĀ Google Gooru Newsletter!

Shares

UP NEXT: Gmail Security Tip - Sign Out of All Other Sessions

Leave a Reply

29 Comments on "Using CSS, javascript & jQuery in Google Sites"

Notify of
avatar

Sort by:   newest | oldest | most voted
Google Sites Hacker
Guest
Google Sites Hacker
April 20, 2012 6:18 pm

This is a great new feature in Google Sites — thanks for sharing. The previous method of finding a gadget to host your CSS/jQuery was awful. This is far more easy to use. Thanks Gooru!

Michael
Guest
June 2, 2012 2:16 am

Thanks for getting the word out on this feature. I was just about to write a custom Google gadget for a carousel when, at the last minute, found your video – cheers.

dave mckee
Guest
dave mckee
June 24, 2012 4:55 am
I’m trying to stick my social media buttons in the top right corner using absolute positioning in an HTML box but the page title covers it up. Kinda some wasted space there to the right of the page title. to bad I can’t access it. Here’s a test page the display the behavior http://pro.d3mckee.com/html-test Here’s the bit of code on the page. The LEFT positioning works as expected but the TOP value, when set to a negative number renders for a few seconds then disappears behind the page title zone, even if the page has no title. It seems to… Read more »
Kyle Horst
Guest
June 27, 2012 4:16 pm

I think what you are trying to accomplish is not exactly possible with Google Sites, even with gadgets, html boxes, in-line CSS. There are those area that are unfortunately dead to code: header area and side margins.

Sometimes it is best to recognize limitations and create alternatives.

Abdul Qoyyuum
Guest
June 29, 2012 6:07 pm

You know I’ve been trying to add this widget but it doesn’t seem to work. Got a wierd error.

Should I get rid of the type?

Anthony Nandaa
Guest
Anthony Nandaa
September 19, 2012 1:06 pm

I can’t seem to see the HTML Box gadget from my menu, or is it only available on Google Apps and not the usual sites.google.com/site/ ? Thanks for sharing though…

Google Gooru
Guest
Google Gooru
September 19, 2012 2:10 pm

Hey Anthony,

The HTML Box gadget is no longer on the main menu, but you can search for it in “more gadgets.” Once you open up the “more gadgets” section, click on “public” and search for “HTML Box.” It will be the second one that comes up on the list, after “try it editor gadget”. Let me know if you have any further questions.

Thanks,

Google Gooru

Sabin
Guest
September 24, 2012 9:45 pm

Yes, this made quite more easier for me. As I have my website running in google sites. I had to hunt for gadget just to embed a button. Now I can do it myself. I am not professional developer so this helped me a lot. Hope google sites will have more features like comments etc in future.

Vic
Guest
Vic
October 20, 2012 5:03 pm

Could anybody create a sites.google.com/site/… for me similar to another sites.google.com/site.. ?

I need its copy. I do not need its content.

I will replace the content myself with my own, that is not related to trans-that.com

I just like how it looks

$?

Vic

Dan Bryant
Guest
Dan Bryant
November 1, 2012 4:31 pm

I’m trying to put a audio player into an html box, but the editor takes the “controls” tag out of the audio element when it folds it in. Is there any way to get it to stop this or work around it?

Joe
Guest
Joe
November 10, 2012 8:54 am
At first glance I thought the html box would enable me to insert a css snip that would slightly modify the layout of the general html content in a google site page. As it turns out this isn’t possible – all html box css, js and html is scoped to that html box and can’t affect anything outside of that box. Whilst this works for some things, the html box doesn’t help me with that should be a trivial customization to a web page . Simple css tweaks pages are not possible. Editing and customizing Google sites in any way… Read more »
Mike
Guest
November 13, 2012 1:38 pm

I’ve put a number of carousels on my site using html boxes from the example. They work fine in chrome, firefox, and internet explorer 9, but disappear in ie 8. Any suggestions?

Mark
Guest
Mark
December 3, 2012 8:20 pm

Can you provide us with the code?

Immigration Advisers Honslow
Guest
March 12, 2013 5:03 am

Hi there, i read your blog occasionally and i own a
similar one and i was just curious if you get a lot of spam feedback?
If so how do you reduce it, any plugin or anything you can suggest?
I get so much lately it’s driving me insane so any support is very much appreciated.

Peter
Guest
Peter
April 20, 2013 10:55 pm

hi

It seems that jquery in the html box is not working anymore got google sites. Even the google example no longer works. It may be idea to update the video/ post.

Sergey
Guest
Sergey
April 23, 2013 7:04 am

Hi, does Google indexing the content of the HTML widget for search?

Kirtan Parekh
Guest
Kirtan Parekh
May 1, 2013 4:34 am

Does your JQuery URL not work anymore?

Tim
Guest
August 12, 2013 4:28 am

Where can I find the code that you used for this video?

Thanks for the heads up.

steve
Guest
steve
February 13, 2014 6:03 pm

How do I embed Google Chart into Google Sites?

I’ve followed this example (https://developers.google.com/chart/interactive/docs/basic_draw_chart) on Blogger with success , but can’t get the same success with GOogle Sites.

Thanks

marte
Guest
marte
April 1, 2014 6:50 pm

unfortunately, this does not work behind a company firewall.

mobiliario comercial
Guest
January 29, 2016 1:11 pm

Admiring the hard work you put into your blog and detailed information you provide.
It’s awesome to come across a blog every
once in a while that isn’t the same old rehashed material.
Fantastic read! I’ve bookmarked your site and I’m adding your RSS feeds to my Google account.

wpDiscuz
Loading Facebook Comments ...

DOWNLOAD

The Ultimate Guide for Google Apps Admins

DOWNLOAD NOW