Google Sites - Animated Slider / Slideshow
Google Docs Presentation

Do you want to add a slick animation, slideshow, carousel or slider to a Google Site using a Google Docs Presentation?  These instructions use a custom gadget made by Romain Vialard to embed a Google Docs Presentation into a Google Site.

New! Check out our Google Sites Gallery

Google Sites


Google Sites Slideshow Maker Gadget - Video Tutorial

Limitations

There is a minimum width of 550px for the gadget else it displays black bars on the left and right sides, and you must use the Standard 4:3 page setup, other than that the only real limitation is your creativity and what Google Docs Presentations allow.

Instructions

  1. Create a Google Docs Presentation

    1. Sign in to http://drive.google.com

    2. Use the Create button and choose Presentation

    3. Add the pages you want to the presentation, with the appropriate animations and slide transitions.

      • If you want your embedded slider to be short and wide then just use the top part of the slides: Google Docs Presentations do not natively offer custom aspect ratios at the moment, so the gadget takes care of this.

      • In the presentation you can insert images from your Picasa Web Albums and Google+ Photos, so you can use a presentation and this gadget as a replacement slideshow tool.

    4. Publish your presentation (in the presentation use the File menu, then Publish to the web... and use the Start publishing button) and from the Publish to the Web dialogue box make sure you 

      • select an appropriate delay from Automatically advance presentation to the next slide so the embedded slider progresses automatically
      • choose to Start slideshow as soon as the player loads so the embedded slider starts automatically

      • choose to Restart slideshow after the last slide so the embedded slider loops

      • and copy the Document link 

  2. Add Slider Custom Gadget to your Google Site

    1. Sign in to your site and navigate to the page where you want to display the embedded slider and use the Edit page button (looks like a pencil)

    2. Use the Insert menu then More Gadgets...

    3. In the Featured section scroll to find the
      Slideshow maker (using Google Slides) gadget.

    4. Use the Select button to display the gadget's properties 

    5. Add the Document link copied earlier from the Publish to the Web box to the Link to presentation (required) box

    6. Use the green Save button above the URL of your presentation to ensure the gadget knows which presentation to use:

      Slideshow Save button

    7. Specify the background colour of your site (as either a word or hex colour code, e.g. white or #FFFFFF) in the Background colour of your page (required) box (this hides the borders).

    8. Make sure the Width is set to 100 percent (if you want it to fill the page, if not specify the width you require) and set the Height to the height in pixels you require (you may need to experiment to get exactly the right height)

    9. Uncheck the Include a scroll bar, Include a border and Display title checkboxes

    10. Use the OK button to add the gadget to the page

    11. Use the Save button to save and display the page with your embedded slider.

Feedback

Screen Shots

(click for larger images)

Google Docs - Publish to the web

Google Docs - Publish to the web

Google Sites - Slider Gadget Properties

Google Sites - Slider Gadget Properties