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.

Click here to watch this video on YouTube.


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

29 thoughts on “Using CSS, javascript & jQuery in Google Sites

  1. Google Sites Hacker Reply

    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!

  2. Michael Reply

    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.

        • Google Gooru Post authorReply


          I don’t believe so. I’ll continue to look into it and let you know if I find any new information.

  3. dave mckee Reply

    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

    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 get covered up when positioned outside of some invisible frame.

    I’ve tried overflow:visable, z-index:99 and using negative MARGINS instead of nested relative/absolute position.


    • Google Gooru Post authorReply

      Hey Dave,

      Personally I don’t think I have ever seen someone position a div in that top right area successfully…but I have a friend who’s a skilled Google Sites Designer and I’m going to check with him and see what he has to say. Hopefully will get back to you in the next couple of days.


      Google Gooru

    • Kyle Horst Reply

      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.

  4. Abdul Qoyyuum Reply

    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?

  5. Anthony Nandaa Reply

    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 ? Thanks for sharing though…

    • Google Gooru Reply

      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.


      Google Gooru

  6. Sabin Reply

    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.

    • Google Gooru Post authorReply

      Yes, I agree. Google Sites has a lot of great features for people that manage web sites but are not necessarily professional developers. I’m glad you felt that this video helped and I appreciate the feedback.

  7. Vic Reply

    Could anybody create a… for me similar to another ?

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

    I will replace the content myself with my own, that is not related to

    I just like how it looks



    • Google Gooru Post authorReply


      I’d like to help you out, but I’m not exactly sure what you mean. If you could email me with more details of what you want to do, I will be able to assist you. My email is Thanks.

      -Google Gooru

  8. Dan Bryant Reply

    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?

    • Google Gooru Post authorReply


      I’m sorry that you’re having this problem. I think I may be able to assist you further if you could e-mail me the code that you used ( There should be a way to insert an audio player without taking away the “controls” tag.


  9. Joe Reply

    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 outside of the WYSIWYG editor is still a major pain.

  10. Mike Reply

    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?

  11. Immigration Advisers Honslow Reply

    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.

  12. Peter Reply


    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.

  13. Sergey Reply

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

    • Google Gooru Post authorReply


      I’m not sure about that, I’ll have to look into it a little more.

  14. mobiliario comercial Reply

    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.

Leave a Reply

Your email address will not be published. Required fields are marked *


The Ultimate Guide for G Suite Admins