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.

Download Blogger_SmoothGallery.zip

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:

<script src='http://your-file-host.com/Blogger-SmoothGallery/scripts/mootools.v1.11.js' type='text/javascript'/>
<script src='http://your-file-host.com/Blogger-SmoothGallery/scripts/jd.gallery.js' type='text/javascript'/>
<link href='http://your-file-host.com/Blogger-SmoothGallery/css/jd.gallery.css' media='screen' rel='stylesheet' type='text/css'/>

Then search for the closing </b:skin> tag on your template. Immediately before this line, add the following section of code:

#myGallery{
width: 200px !important;
height: 100px !important;
overflow: hidden;
}

Adding your slide show to your blog sidebar

In your blog's HTML code, find the DIV where your sidebar wrapper begins. The code will look something like this:

<div id='sidebar-wrapper'>

Immedietly beneath this line, paste the following section of code:

<script type='text/javascript'>
function startGallery() {
var myGallery = new gallery($('myGallery'), {
timed: true,
showArrows: false,
showCarousel: false
});
}
window.addEvent('domready', startGallery);
</script>

Adding your images and links to the gallery

For the next part of the installation, you will need to use your images and the relevant links to your popular/featured posts.

Remember that your images should all be the same size!

Upload all of the images you would like to use to your file host and note down the URLs.

This last step is a little bit tricky, so be sure to double check the code you are replacing and ensure you don't accidentally delete any tags!

1. Copy all of the code below and paste into a simple text editor (eg: Notepad or Notepad ++).
2. Replace all image URLs with those of your own images.
3. Replace all link URLs with the links to your posts.
4. Replace the titles (between the <h3> and </h3> tags) with the titles of your posts.
5. Replace the descriptions (between the <h3> and <h3> tags) with a brief description of your posts, preferably a short one-liner.

<div id='myGallery'>
<div class='imageElement'>
<a class='open' href='http://your-post-url.blogspot.com'/>
<img class='full' src='http://imagehost.com/your-image1.jpg' />
<h3>Post Title 1</h3>
<p>Description of post 1</p>
</div>
<div class='imageElement'>
<a class='open' href='http://your-post-url.blogspot.com'/>
<img class='full' src='http://imagehost.com/your-image2.jpg' />
<h3>Post Title 2</h3>
<p>Description of post 2</p>
</div>
<div class='imageElement'>
<a class='open' href='http://your-post-url.blogspot.com'/>
<img class='full' src='http://imagehost.com/your-image3.jpg' />
<h3>Post Title 3</h3>
<p>Description of post 3</p>
</div>
</div>

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:

#myGallery{
width: 200px !important;
height: 100px !important;
overflow: hidden;
}

And change the dimensions highlighted in bold red to the new dimensions of your images.

Credits

The original SmoothGallery scripts was developed by JonDesign and Mootools. Both the original scripts and those featured here are provided under the GNU General Public license.

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.