Okay folks – I know I said I was going to be scarce around here. But I couldn’t pass up the opportunity to share this tutorial with you because it is just that awesome 🙂
Want to make a slider that rotates through some of your pics? Most of the solutions you’ll find online for rotating banners require Flash (which doesn’t display on Apple products and mobile devices), or they don’t work in all browsers, or they make you download some program that displays their link over your pictures, or they don’t have a pretty fading effect between the images, which is a bummer and makes your slideshow look choppy.
UNTIL NOW! (<– Sorry, I’m just excited.)
So I’ve been struggling with making the perfect, easiest, best slideshow that also plays nice with Blogger, and I’ve finally perfected the code. It’s super simple and all you need to do is add a widget to your layout – you don’t have to mess with any of your template coding unless you want to make it only display on your homepage and not your other pages and posts. I’ve pieced it together from many different sources, but the main source comes from MBT. I’ve made it bigger, deleted the scroll controls and changed the fade timing so that it looks great without rotating too fast. Of course, these are all things you can also change yourself if you want to mess with the coding.
Let’s get started, shall we? If you want to see what this looks like, head over to my homepage and see the slideshow I have there.
Okay, you’re going to want to visit this link, copy the provided code, and paste it into a program like TextEdit or Notepad.
You will need to alter this code.
Here’s a picture that highlights the part of the code that you will need to change. ***The parts you need to change are located near the end of the code***
Here’s what all the colors mean:
Green: This is the width and height of the images in your slideshow. ALL OF YOUR IMAGES NEED TO BE THE SAME SIZE. The width comes first, then a comma, and then your height.
Teal: This is the link to your image itself. Photobucket is free to join, and if you upload your pictures there, it is easy to copy the *Direct* link of your image. You’ll look at the sharing options, find the button that says “Get Link Codes” and find the URL to replace the ones I already have in the code. Don’t grab the HTML link or IMG link, but look for the option that says Direct. That’s the one you want. If you have questions about how to get the link for your images, leave a comment and I’ll try to help you out.
Purple: This is the link you want your image to go to. If you don’t want your image to link to anything when people click on it, just delete the stuff in purple. <–IMPORTANT – Don’t delete any of the apostrophes or any parts of the coding besides the link itself.
Pink: This is what separates your images. If you want more images, you’ll want to copy one of these whole sections and paste it in between the other sections. If you want fewer images, delete the whole section in the bracket. NOTICE – The last image does not have a comma after it like the other ones do. This is important, because if you have a comma, your slideshow won’t display in Internet Explorer 🙂
Now, in your plain text editor, you should have your altered code. Go into your blog, in the Layout section and add an HTML/Java Script gadget. Paste this code in there and leave the title blank.
If you know your way around HTML, you can alter other parts of the code so that your slideshow can have a border. You can also change the time duration of the fade, or how long each photo stays up, or you can add the control arrows back in that let people click to see the next pic, or you can add a caption over your photos. Pretty much, this code can do it all for you!
UPDATE: Some have asked how to add back in the arrows. It’s very simple, simply find this line of code: height:’0px’, and change 0 to 50. (the arrows will show when you hover over the slider).
Hit save and drag the widget wherever you want it. Save it in your Layout mode and then go see your blog to see the final results! Of course, if you’re not feeling too HTML savvy, or if you want help in creating your slideshow, you can always hire me to do it for you. Let me know if you have any questions 🙂
UPDATE: Many people have asked how to center the slider or get it to have certain margins. Since this seems to be what most people want I have added a line of code for the margins. If you don’t change anything, it will be centered automatically. Or you can change/remove the margins to get it to align how you would like.