To see a working example of the slide show click on the image below.
At first I thought it was going to be a daunting task but once I started reading about it, researching it and examining HTML code I found out it was pretty straight forward and really easy to do.
I found the majority of my information from this site. They do a really great job on teaching you how to create the slide show but there is a lot of information and I wanted to make it "easy" for non HTMLers to use the slide show. Plus they wrote the code for a generic website and I wanted to focus it for blogspot users, sorry wordspress. However, we'll be using the sites provided javascript to make the slide show run.
The slide show seems to be split up into 3 different parts. A container for the slide show (we'll be using a simple div tag to define the container) The javascript to make make the slide show function and a container that "runs" the slideshow. More on that later.
Today we will be focusing on prepping the slideshow.
In my example slide show I placed it below my blogs header but above my posts and sidebar. You can easily make this slide show directly above your post or have it be part of your sidebar, you'll just have to prep a little differently than you would a slide show directly below the header.
First things first you want to figure out how wide your intended area is.
If you're planning on placing it below the header than your going to want to find out the dimensions of the outer wrapper. If you are planning on placing it directly above your posts only, then you're going to want to find the dimensions of your main wrapper and if you are planning to place this somewhere in your side bar, you're going to want to find the dimensions of your sidebar wrapper.
In your blogger setting click on your design tab and then click on the edit HTML link.
Next your going to want to locate the following line of HTML code.
If you intend to place the slide show above your posts, beside your sidebar, locate the following line of HTML code.
If you intend to place this somewhere in your sidebar, locate the following line of HTML code.
Make note of the width of your intended areas wrapper. This width will be the width of your image collage. If you don't make all your images the same size the slide show won't work correctly and will "jitter" as it fades between the photos. *note: If your using one of the new blogger templates your going to want to go into template designer and find out your blogs widths from the adjust widths tab.
Now comes the fun part. Open your favorite photo editing software and create a few collages to use for your slide show. The following images are the images that I created for my simple slideshow. (I repeated the same three images to make it easier, and plus I didn't want to search my computer for the "perfect images" forever, I'm just lazy like that, plus I like these pictures I took when I went to Italy) I only created 3 different collages but you can have as many collages as you would like.
*NOTE: My outer wrappers pixel width is 900px and so I created these images at 900px wide and 243px high.
Once you've created your image collages you're going to want to upload them to a image hosting site. I used photobucket to host my images.
I guess that should keep you busy for the time being. Enjoy making those image collages. It should be loads of fun. Next installment will be on how to create the slide show.
Have fun and take luck.
No comments:
Post a Comment