Easily Display a Photo Slideshow on Blogger

Photoblogs are really popular, and a lot of them use a slideshow to display some of the photos. In Blogger, there is a slideshow gadget available but it doesn’t work very well.

If you’ve ever tried to use Blogger’s YouTube gadget, you’ll know that it doesn’t always display strictly your videos. Well, same thing with the slideshow gadget.  In the gadget, the only way you can choose specific photos is to create a (Public) album in Picasa, enter your username in the gadget, and choose the album.

Gadget settings for a slideshow in Blogger

This is the best you get.

If you don’t go through Picasa and “Album”, you type in a keyword and Blogger displays random photos from Picasa, Flickr, Photobucket, or another feed based on a specific keyword. There isn’t a place to login, and only Picasa is linked to your Blogger account, so all the others could show photos from anyone.

Even if you do go with the Picasa Album option for one of your own albums, you don’t get a lot of personalization. Why not do a sophisticated looking slideshow in your sidebar?

Start with a Photobucket account. This may be possible in Flickr and Picasa also, but in my own searching it seems Photobucket was the only one or at least easiest to figure it out on. If you haven’t created a Photobucket account, go ahead and do so now.

Create a Slideshow in Photobucket

  1. Login to Photobucket with your new account.
  2. Upload photos – all the photos you want or just whatever you want in your slideshow. (If you plan to create multiple slideshows, you can upload all your photos and distribute them amongst slideshows later on.)
  3. Click Tools
  4. Under “Slideshow”, click “Try it Now” (see image below)

    Create a slideshow in Photobucket for use in Blogger

    Step 1 - Click Tools, Step 2 - Click Try It Now

  5. This is the fun part – add all the images you want using the little green plus icon.
  6. Select a style for your slideshow. You can have it very basic, cutesy, fancy, etc. – however you want it to look.
  7. Photobucket will show a preview of your slideshow every time you change styles.
  8. When you’re happy, click “Save Slideshow”.

Now that’s that’s out of way, time to add it to Blogger. Go ahead and open a new window or tab and log in to Blogger.

Add Your Slideshow to Blogger

  1. You should now be at a screen with your slideshow and links for sharing it.
  2. Click the HTML code box – this should copy it to your clipboard.

    Add a customized slideshow to Blogger!

  3. From your Blogger dashboard, go to Design.
  4. Go to Page Elements.
  5. Click on “Add a Gadget”.
  6. Add an “HTML/Javascript” gadget.
  7. Paste the code you copied from Photobucket into the “Content” box for the gadget.
  8. Name it whatever you want.
  9. Click “Save”.
  10. Click “Save” again to save your template customizations.
  11. You now have a lovely slideshow in Blogger!

If you don’t want to have the little “Get Your Own” button underneath, go back into the gadget and look for the following code:

<a href="http://s1101.photobucket.com/albums/g422/username/?action=view&amp;current=12a34567.pbw" target="_blank"><img src="http://pic.photobucket.com/slideshows/btn_viewallimages.gif"
style="float:left;border-width: 0;"> </a></div>

The red is where your username and your slideshow name will appear. Remove all that code before </div>  and you won’t have that little button.

Although this takes a few extra steps than using the built-in Blogger gadget, your results with Photobucket will look very elegant and you have plenty of customization options available.

This entry was posted in Blogging, General Techie, Intermediate and tagged , , , , , , . Bookmark the permalink.

4 Responses to Easily Display a Photo Slideshow on Blogger

  1. Pingback: I Hate My Ex Photo | Making Up Made Easy

  2. rajedition says:

    Awesome and super simple tutorial..

  3. rajedition says:

    super simple tutorial for adding the slideshow.. thanks for the share…

Tell Me What You Think

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s