Truly Simple Slideshow Gadget for Blogger By special request from some very sweet readers, I'm happy to bring you a new slider gadge...
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, 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:
code-it-pretty.googlecode.com/svn/truly-simple-slider/truly-simple-slider.xml
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!
COMMENTS