April 09, 2008

Create a Cross-Fading Featured Posts Slideshow in Blogger with SmoothGallery

The slide show of featured posts which appears in my sidebar was among the most talked about feature of my recent redesign. This slide show is powered by JonDesign's SmoothGallery: a combination of JavaScript and Mootools which creates a cross-fading gallery of images which link to these posts.

In this article, I'll explain the simplest methods of using SmoothGallery to create your own slide show of featured posts which you can display in your blog sidebar.

SmoothGallery offers many different styles of gallery, but unfortunately not all options function properly in Blogger powered blogs.

So in this tutorial I will explain two different styles of SmoothGallery slide shows which I know can be used in Blogger blogs and have tested in different browsers:

A timed slide show (similar to the one featured in the sidebar)

A manual slide show, where your visitors can skip through each slide using arrow buttons

The initial installation for these slide shows is essentially the same; you can configure the different options for display after installation as I shall explain later in this tutorial.

Requirements (read this first!)

You need to ensure you have access to a hosting account where you may upload images, JavaScript and CSS files. Most free file hosting services allow you to upload these file types, including Google Pages and the hosts listed on this page.

You will also need several images which are all exactly the same size. For the purpose of this tutorial I would recommend these images to be 200x100 pixels in size which would fit neatly in most Blogger sidebars. If you prefer to use images of different dimensions, you will need to change the size of the gallery in your style section, as I shall explain later in this tutorial.

If you are able to meet these requirements, read on to see how easy it is to install your own SmoothGallery slide show!

How to install your SmoothGallery Slide show

First of all, you need to download the files needed to make the slide show function. For your convenience, I have included the files required to run this in Blogger blogs in a zip file which you can download below.

When you have downloaded these files, retain the same directory structure and upload these to your file host.

Next, go to Layout>Edit HTML in your Blogger dashboard and search for the closing </head> tag. Immediately before this line, paste the following section of code (substituting "your-file-host" for the URL where your Blogger SmoothGallery files are hosted:

Once you have made all these edits (and checked that you haven't accidentally deleted any tags!), copy this entire modified section of code to your clipboard and paste this below the final </script> tag which you recently added in your sidebar.

Now, preview your template. If all has gone well, you should see your slide show appear in the sidebar. This initial installation will add a timed slide show where your images will change every three seconds.

Once you are sure you have installed this slide show correctly, you can proceed to save your template.

Change the "timed" slide show to a manual one

If you would prefer your readers to choose when the next slide will come into effect, you need only make two small changes to the script for your SmoothGallery installation.

Find these lines in your template code:

timed: true,
showArrows: false,

And change the values to their opposites, like this:

timed: false,
showArrows: true,

All other values need to remain the same!

Now when you preview your template, you will see semi-transparent arrows in your slide show which become opaque when your mouse hovers over them. Clicking on these arrows will take you to the next slide in the show.

Changing the dimensions of the slide show

If you would prefer your slide show to be a different size than 200x100 pixels, you will need to change all of the images you use to this same size.

Then find this section of code in the <b:skin> section of your blog template:

Credits

Final Thoughts

Here at Blogger Buster, I use SmoothGallery to create a slide show of featured posts in my sidebar, but you could just as easily use this to create a stylish gallery of your photos with captions, or an animation of products in your blog.

I hope you have found this tutorial to be useful to you (despite being a little complicated!) and would love to see how you use this in your own Blogger powered blogs.

Find us on Facebook

Follow by Email

Browse through the Archives

All existing posts are still available to view while I'm working on the site, albeit seen in a much simpler interface. Feel free to browse through the archives to find tutorials, templates and articles to help you build a better blog: