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!

About

The #1 resource for Google Apps how-to videos. Follow The Gooru to keep up to date on the latest Google Apps features, news, updates and more! You can also check out The Gooru's library of Google Drive Training videos and Gmail Training videos!

Shares

28 Comments

  1. Google Sites Hacker

    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

    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.

        1. Google Gooru

          Dan,

          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

    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 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.

    Dave

    1. Google Gooru

      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.

      Thanks,

      Google Gooru

    2. Kyle Horst

      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. Anthony Nandaa

    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…

    1. Google Gooru

      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

  5. Sabin

    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.

    1. Google Gooru

      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.

  6. Pingback: Enterprises Adopting "Ask the Gooru" as Their Go-To Resource for Google Apps | Taiwan Daily News Exchange

  7. Vic

    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

    1. Google Gooru

      Vic,

      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 gooru@gooruvideos.com. Thanks.

      -Google Gooru

  8. Dan Bryant

    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?

    1. Google Gooru

      Dan,

      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 (gooru@gooruvideos.com). There should be a way to insert an audio player without taking away the “controls” tag.

      -Gooru

  9. Joe

    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

    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. Pingback: » Enterprises Adopting « Ask the Gooru » as Their Go-To Resource for Google Apps

  12. Pingback: » Enterprises Adopting « Ask the Gooru » as Their Go-To Resourcefor Google Apps

  13. Pingback: Enterprises Adopting « Ask the Gooru » as Their Go-To Resourcefor Google Apps

  14. Pingback: Enterprises Adopting “Ask the Gooru” as Their Go-To Resource for Google Apps | Mkt PR

  15. Pingback: Enterprises Adopting “Ask the Gooru” as Their Go-To Resource for Google Apps « Inforoom

  16. Pingback: Enterprises Adopting “Ask the Gooru” as Their Go-To Resource for Google Apps | Japan Economics News

  17. Pingback: Enterprises Adopting “Ask the Gooru” as Their Go-To Resourcefor Google Apps | Japan Economics News

  18. Pingback: Enterprises Adopting “Ask the Gooru” as Their Go-To Resource for Google Apps | Market Updates

  19. Pingback: Enterprises Adopting “Ask the Gooru” as Their Go-To Resourcefor Google Apps | Market Updates

  20. Pingback: Enterprises Adopting “Ask the Gooru” as Their Go-To Resource for Google Apps | Korean News Currents

  21. Pingback: Enterprises Adopting “Ask the Gooru” as Their Go-To Resourcefor Google Apps | Korean News Currents

  22. Pingback: Enterprises Adopting “Ask the Gooru” as Their Go-To Resource for Google Apps | Infobiz Australia

  23. Pingback: Enterprises Adopting “Ask the Gooru” as Their Go-To Resourcefor Google Apps | Infobiz Australia

  24. Pingback: Enterprises Adopting “Ask the Gooru” as Their Go-To Resource for Google Apps | Deutschland Newswire

  25. Pingback: Enterprises Adopting “Ask the Gooru” as Their Go-To Resourcefor Google Apps | Deutschland Newswire

  26. Immigration Advisers Honslow

    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.

  27. Pingback: How to Build a Company Intranet on Google Sites | BetterCloud BlogBetterCloud Blog

  28. Peter

    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.

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>