*UPDATE - September 22nd, 2012 @11:40PM: I found the problem to the static image that was talked about in the comments. The unique IDs in the first container "slideshow" and "slideshow background" got switch. I've made the correction. If the static image continues to be a problem please let me know.
*UPDATE - September 22nd, 2012 @11:00PM: I've had a few comments about how this slideshow doesn't work. I'll see what I can do about fixing the problem. I am sorry for the trouble and the inconvenience.
Today I am finishing up my post on how to create a fading photo slide show in blogger. An example of the slide show can be seen here.
If you missed my previous post on this subject you can catch-up here.
Last time I focused on prepping the slide show. This time we'll be learning how to place the slide show on the blog.
The slide show is split into 3 different parts.
- A container for the slideshow
- and another container that runs the slide show.
Before we can create our container we must first give our slide show a home on the blog. The slide shows home will be a custom widget that we create. To create the widget go to your blog setting and click on the design tab and then the page elements link.
After that you are going to want to click on the add a page element link.
The configure widget window is where we will be building our slide show widget. Don't give the widget a name otherwise text will appear above the slideshow....unless you want that. You can say something like "Our trip to Disney" or "Our Family Portraits." It's whatever you want. It's your widget.
Now that we have given our widget a home lets get to coding.
First thing we need to do is create the container for the slideshow and in this container we need to specify our slide shows background image, assign the background image a unique id, assign our container a unique id, specify our background images url, and define the dimensions of the slide show.
My containers unique id is slideshow and my background images unique id is slideshowbackground. This is important for later and if you want to have more than one slide show on your blog. If you want more than one slide show you'll have to change the unique id's of the second slide show element.
You're going to want to type the following code into the content box.
Like I explained above I've assigned my container a unique id and my background image a unique id. I've also specified my containers dimensions within this <div> tag. Those dimensions should match the dimensions of your images. Your width= should reflect your images width and your height= should reflect your images height. You'll also need to define your images URL source.
Your code should look similar to this
I created 3 images that were 900px wide and 234 px high. So I have appropriatly placed those numbers in the code. My source images url is http://i556.photobucket.com/albums/ss5/ejspencer/test%20stuff/testforslideshow3-1.jpg.
DON'T PRESS SAVE & CLOSE THE CONFIGURE BOX WE ARE NOT DONE YET!
Just as a refresher here are my images once more.
Following along okay?
Make sure you copy the entire thing. It's a long code.
The last thing we need to do is create a container that runs the slide show and that defines the images that we want to use for the slide show.
In place of your list of images you're going to list the direct link url of all your images. My three urls are
REMEMBER - you need to list your background image first. If you don't the slide show will do crazy things. I totally learned that the hard way.
Your run slide container division code should look like this
Now you can close the configure box and admire your coding work.
Please let me know if you are having troubles. This is my first time creating a tutorial and I want to make it easy to read and follow.
Incase you need to make sure you've placed everything correctly, below is a final HTML code of the side shows configure box.