Google Sites Help
Steegle

Animated Slider / Slideshow Google Docs Presentation - classic Google Sites

Do you want to add a slick animation, slideshow, carousel or slider to a classic 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 classic Google Site.

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, a maximum width of 1050px else you see a black bar at the top, 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

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

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

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

Google Docs Presentation Templates

To help get you going with the slider we have provided some presentation templates to use with the gadget:

Aspect ratio 7:2

Use this template

Aspect ratio 7:2

Use this template

Aspect ratio 7:3

This template provides a mask to make anything in the content area rounded and provides a counter to display the total number of slides and the current slide

Use this template

Go your own way

Of course you don't need to use any of the above templates and you can make your presentation any way you like. You just need to experiment with the height and width of the gadget to get it to display properly.

Presentation Creation Advice

  • Set the background colour of your slides to the same colour as your site page's background colour. This makes the presentation blend into your page
  • Leave a little space at the top of the slide as the embedding gadget covers some of the slide to hide the borders added by the Google Docs embedding tool
  • If you want to rounded corners on the slider use a presentation shape with rounded corners (e.g. the rounded rectangle) or use the rounded corner template provided above . For images you can use an image editing tool to give rounded corners or use this free online service: http://www.roundpic.com/ (don't forget to match the slide background colour with your page background colour as mentioned above).

Please let us know if this article helped?