Truly Simple Slideshow Gadget for Blogger

By special request from some very sweet readers, I'm happy to bring you a new slider gadget for Blogger! This slideshow is truly simple — it's easy to install, and it's designed to blend in effortlessly with your template. There are no buttons or arrows, no borders or box-shadows. Just a series of up to 6 clickable photos, gracefully sliding along.

And, here's the very best part — you don't have to write or edit any code to use this gadget!

The slider works with all Blogger templates except Dynamic Views, which does not accept custom gadgets.

Demo

You can see a live demo of the slideshow at http://codeitpretty.blogspot.com/p/truly-simple-slider-demo.html.

Before Installing the Gadget

First, make sure your images are sized exactly as you want them to appear in the slideshow. The slider looks best when all of the images are the exact same size.

Next, upload all of your slideshow images to your favorite image host. You can use the Picasa Web Album for your blog, Photobucket, Flickr, or any other image hosting provider.

After you've uploaded all of your images, keep your image host open in a browser tab or window. You'll need direct links to your images in an upcoming step.

Next, decide where you'd like your readers to go when they click on your slideshow images, and get those links ready. Click-through links are optional but recommended.

Install the Gadget

Go to Layout and click the "Add a Gadget" box wherever you'd like to place your slideshow gadget.

On the window that pops up, click the "Add Your Own" tab. After the http:// enter:

Click the "Add by URL" link and you'll move on to the setup screen.

Configure the Gadget

Once you've installed the gadget, you'll need to set it up to start seeing slides! I'll take you through each field and show you what goes where.

Default Settings

These fields are filled in by default, but you can change them all.

Title

The title is optional. You can change or delete it.

Height

The gadget height is set to 300px by default. Change that to the height of your images, plus at least 15 pixels. For example, if your image height is 400px, change the height setting to 415. The perfect height for your gadget will vary a bit depending on your template. If the bottoms of the images look cut-off after you publish your slideshow, come back to this setting and add a bit more height to the gadget.

Seconds Between Slides

By default, this is set to 4 seconds between slides. Decrease this number to speed up the slides, or increase it to slow them down.

Image Settings

Now it's time to start adding images! You'll need direct links to each of the images you're adding to your slideshow, so make sure to keep your image hosting service open in another tab or window while you work.

Image URL

Enter the direct link to your image in this field. Do not put quotation marks around the link.

To get the direct link from an image in a Picasa Web Album, click its thumbnail in your blog's album to open its full-sized version. Then, click the "Link to this photo" link near the bottom of the right column. Set the "Select size" dropdown menu to "Original size" and click the "Image only (no link)" option below the size menu. Copy the link in the "Link" box.

If you don't see the "link to this photo" option, or if the options don't match what you see here, you can get your image's URL by right clicking it and selecting "copy image location" or "copy image URL" from the menu.

If you're using a different image host and aren't familiar with how to get direct links to images, check your host's support documentation or contact their customer support for help.

Click-through Link for Image

This is the link your readers will go to when they click your images. Enter the complete link, without quotation marks.

Alt Text

You know I'm a stickler for alt text! Alt text gives anyone using a screen reader a description of where your image link is going to take them if they click it. For example, if you're linking your slide to a post, enter the post title here. If you didn't set a click-through link for your image, enter a brief description of your image here.

Before You Save the Gadget

Fill in the image URL, click-through link, and alt text for each image in your slideshow. At the bottom of the gadget you'll see fields for left margin and right margin. Leave those blank at first, we'll come back to them later in the tutorial.

Once all of your image details are filled in, they'll look something like this:

Do a quick double check to make sure your links are correct and in the right places. Also, make sure there are no quotation marks around your URLs. If everything looks good, press the orange save button at the bottom of the gadget window.

You may see a preview above the save button that makes it look like your images aren't loading. Don't panic! That will change once you save the gadget.

After you save your gadget, press the orange "Save Arrangement" button at the top of the Layout page, then go check out your slider on your blog.

If you're happy with how it looks, you're all done. Enjoy your slides!

If you'd like to tweak the margins a little, read on.

Left Margin and Right Margin

After you see your slideshow, you may decide you'd like to move it a little to the left or right. Use the Left Margin field to create more space on the left side of the slideshow, or the Right Margin field to add space to the right side. Enter only whole numbers in these fields. Do not add "px", the gadget will do that for you!

Show Off Your Slider!

I'm using the Truly Simple Slider on my #Blogger blog!

Once you're done with this tutorial, I'd love to see your slides! Leave a comment with a link to your blog, Tweet at me on Twitter, or comment on this tutorial's post on Google .