Creating a slideshow

Tuesday, June 23, 2009

Gail wanted to know how I made the slideshow on my blog, so I'd thought I'll give you an overview on how to make and add a flash slideshow to Blogger using the program Flash slideshow maker.

While sites like Flickr, Picasa and Photobucket offer their own slideshow applications, I wanted something more customizable so I googled and found this program. I used the free version which has the "trade-off" that you see their banner at the end of the show, which I personally don't have a problem with. What I like with this program is that it's very easy to tweak. To be honest slideshows can be something of an eyesore if they are not done right, so I was a bit weary about whether it would be right for my blog because I want to keep the layout clean.

Anyhow, this is how I did it
(click on the images to get a bigger view):

Step 1. Start the slideshow maker. Using the Explorer view, drag and drop the images that you want included in the slideshow.

Step 2. Pick a transition effect. There are a loads of options, but only a handful that aren't crazy ugly. You can also tweak the transitions by changing the time values. Make sure that you click Apply to All when you have decided.

Step 3. Pick a theme. There are even more options here and even more ugly. But a few nice ones too. I picked the Paper theme. Also here is were you determine the size of the slideshow. Very important since it has to fit into one of your blog columns.
A few words on the size of the slideshow: If you place it at the bottom of the large column, you will have no problem fitting in the slideshow. But if you want the slideshow in the right column for instance, you need to know that the default width for Minima classic is only 220 pix and for Rounders the width is 240 pix. I have tweaked my Minima template by changing the html code to make it bigger so that a 250 pix wide slideshow will fit in. Read this tutorial
for info on how to change the size of your columns.

Step 4. Publish your project. This will convert your selection into a flash file (.swf). After this step, save your project as a project file so that you can keep adding files and update your slideshow.

Step 5. Upload the flash file to a host. I recommend using Google sites, they allow a 10 Mb upload and that would be enough for most slideshows (mine are currently 3 Mb).

Step 6. Copy the url of the .swf file. You will need it soon.

Step 7. Open Blogger to add your slide show.
Pick Layout and Add Gadgets.

Step 8. Pick HTML/JavaScript. Do not use the the Add slideshow option for this method. It only works for streams like Picasa's.

Step 9. Name your slideshow and paste the following code, remembering to change the url and size so it's corresponds to your .swf-file:

<embed pluginspage="" quality="high" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" src="" align="middle" height="400" width="250"></embed>

Step 10. Click Save and the window will close. Now pick Preview to see if it looks alright on your blog. Are you satisfied with the result, just click Save, and the slide show will now appear on all your blog pages. Voilá! If you want to add more images just open the project in the slideshow maker and publish and upload the file again. No need to do anything in Blogger, it will just pick up the updated file automatically.

P.S. If you end up hating the slideshow layout after you saved, just open the Gadget again and chose Remove.

Hope this will be helpful!

You Might Also Like

14 kommentarer

  1. Thank you for this tutorial, and for all the others too, all very useful!

  2. Thanks so much for this. I love bloggers who take the time to answer questions.

  3. I am just passing out at seeing Blogger screenshots and menus IN SWEDISH!!! So cool. It's a great slideshow you've got, and even more impressive that you have congruousness among all your finished project photos.

  4. Thanks for that, great tip.

  5. >>Sonia Luna and Meg: Glad to hear that you find the tutorial useful!

    >>Gail: You are very welcome :)

    >>Antoinette: Yeah, Google is BIG here too :) You know I had to look up congruousness, had never heard it before. Cool word! I try to keep a certain order, but I've got a lot of junk there too!

  6. Thank you, thank you, thank you! This is so timely - I made a picasa slide show last week, and find it terribly ugly (but left it up anyway). So here's to a better one soon!

  7. It IS the same fabric, I've just sewn the curves on the outside edges of the pockets and they look weird. I think the presser foot gets stuck on the waterproof coating and can't slide around the corner.

    Anyway, mine's called "micro poly". I think I'm beginning to realise why very few people sew their own raincoats ....

    I blame you. You made it look possible ... And highly desirable.

    When I finally finish and blog about my coat, I think the post's title will be, "kids, don't try this at home."

  8. Enjoying your blog.

    If you would like to pay me a visit, you can find me at:

    I just posted some sweet little quick and easy little sundresses I made for my 8 year old daughter with instructions on how to do it yourself, and I recently made a maxi dress for myself from a 1974 pattern I found in an antique store.



    (My 8 year old also has her own blog where she shares her sewing adventures.

  9. Thanks for the tips .. finger's crossed!

    Your raincoat is so fabulous. I hope I get to wear mine ...just once in the sandpit will suffice!!

  10. The word I was trying to find when I left that comment was "consistency", but congruousness was close enough! Though I kept wondering if the proper noun form was congruity. I just picked a word and went with it. Ha.

    Really though, I look through my project photos -- some on the form, some on me, some without my head, some from the side, I mean no consistency. I think what makes your slideshow be so much more compelling is that the scale of the clothes is the same throughout, and most of the photos include your face and full body. Anyway, again -- nice slide show.

  11. This post must have taken you forever! Thanks for the tutorial. It is a neat feature on your blog!

  12. I posted mine! I'm so excited about this. Thanks for hosting it! Add

  13. I posted mine! I'm so excited about this. Thanks for hosting it! Add

  14. I posted mine! I'm so excited about this. Thanks for hosting it! Add