About   All Tips   Tips by Category   Tips by Ability   Help!

Clickable Slideshow- Intermediate/Advanced

*Some people have reported problems viewing the slideshow on their computers once it is created. The first 1-2 buttons scroll fine, then skip and return to the first button. If my sample slideshow does that for you and does not scroll the right way after refreshing your screen, then I would suggest that you not follow this tutorial. If you do choose to try making a slideshow, I would make sure it will work for you with just a couple of buttons before investing all of the time it takes to create a full slideshow. Be sure to refresh your screen a couple of times before chalking up your efforts as unsuccessful.


Sneaky Momma Blog Design
Sneaky Momma Blog Design
Sneaky Momma Blog Design
Sneaky Momma Blog Design
Sneaky Momma Blog Design


It's been awhile since I've done a tutorial over something somewhat complicated. Making a clickable slideshow (like the one above), is surprisingly easy. You have to work with HTML, but you do not have to make any changes to your template. However, it is a bit tricky if you've never worked with HTML before. Pay close attention to every little character. If this doesn't work for you, start completely over and try again. You can do this!

1. Find which buttons you'd like to use.

2. Copy their HTML codes into an easy to find list. Make sure to put spaces between the codes so that you can easily tell them apart. You can find these codes in the little grab boxes underneath the buttons on the blogs that they are on.

3. Go to customize-->add gadget-->HTML/Javascript.

4. Copy and paste the following code (the exact code used to make the slideshow above) into the big box.
<center><span ><span class="Apple-style-span" style="FONT-WEIGHT: bold"></span></span>
<marquee direction="up" onmouseover="this.stop()"
onmouseout="this.start()" scrollamount="3" bgcolor="#ffffff">

<center><a href="http://www.sneakymommablogdesign.blogspot.com"
target="_blank"><img border="0" alt="Sneaky Momma Blog Design"
src="http://i409.photobucket.com/albums/pp178/sneakymomma/
smbdbutton-pb2.png"/></a></center>


<center><a href="http://www.sneakymommablogdesign.blogspot.com"
target="_blank"><img border="0" alt="Sneaky Momma Blog Design"
src="http://i409.photobucket.com/albums/pp178/sneakymomma/
smbdbutton-pb2.png"/></a></center>

<center><a href="http://www.sneakymommablogdesign.blogspot.com"
target="_blank"><img border="0" alt="Sneaky Momma Blog Design"
src="http://i409.photobucket.com/albums/pp178/sneakymomma/
smbdbutton-pb2.png"/></a></center>

<center><a href="http://www.sneakymommablogdesign.blogspot.com"
target="_blank"><img border="0" alt="Sneaky Momma Blog Design"
src="http://i409.photobucket.com/albums/pp178/sneakymomma/
smbdbutton-pb2.png"/></a></center>

<center><a href="http://www.sneakymommablogdesign.blogspot.com"
target="_blank"><img border="0" alt="Sneaky Momma Blog Design"
src="http://i409.photobucket.com/albums/pp178/sneakymomma/
smbdbutton-pb2.png"/></a></center>

</marquee></center>


5. Replace my button's codes with each button that you would like to include in your slideshow. If you would like to add more buttons, simply add the button's code to the list, making sure to put it before </marquee></center>.
Ex: The HTML of one of my buttons looks like this:

<center><a href="http://www.sneakymommablogdesign.blogspot.com"
target="_blank"><img border="0" alt="Sneaky Momma Blog Design"
src="http://i409.photobucket.com/albums/pp178/sneakymomma/
smbdbutton-pb2.png"/></a></center>


You'll notice I repeated it several times so that you could see the slideshow effect. Just highlight my code and paste each button you want into your slideshow once.

6. Save.

You may have to go in to the code and delete the spaces in between the buttons, depending upon the desired effect. You can insert &nbsp in between each button to add a space.

You can change the background color of your slideshow to match your blog. Simply change the #ffffff (at the top) to whatever you wish it to be. You can find a hex code for just about any color by clicking here or by installing ColorZilla if you have Firefox.

Are some of your buttons not centered? Add <center>to the beginning of the individual button's code and </center>to the end of each button code. Most buttons are automatically centered.

This can be a little complicated, so take your time. Remember, if you don't get this on the first try, delete everything and start fresh. It's so much easier to begin again than to scrutinize every character trying to discover what was left out.

Have fun!

19 comments:

Melissa said...

I want to do this, but is there any way to do it horizontal?

The Rambler said...

YOU are a lifesaver.

I've been trying to figure it out!

Bowing down to the master :))))

Thanks thanks thanks.

Anti-bloggedys' sis!

xoxo

The Pittsburgh Hites said...

this is great thanks, i just added it to our blog...is there anyway to make the background invisible though? i guess i need to do some searching to see how to do that...

peppermint patty said...

Cool! I love it!

Jenny said...

?? What big box?

Jenny said...

O.k. I am loosing it I know which box you were talking about, but I can not get it to work right?

gianna said...

i am so excited you commented on my blog! you are super easy to read and follow! thanks for stopping by! and ultimately for helping out!

God's Not Finished With Us Yet... said...

I found your site through a new friend, but I tried playing around with this but the click-able slideshow stops short....just like it does in your slideshow that you show on your page....mine only goes to the second 'button' but then suddendly stops short and won't continue the slide to the 3,4,5,....8th button; it only shows just two and the beginning of #3. Also, when I viewed the color codes for adding something to match my background....nothing matches it. Do you know the code to make it 'transparent' so it matches? Here's my email attachment for a response: lopezfamilymail@hotmail.com. Thank you so much for your help in figuring this out. ~Sarah

God's Not Finished With Us Yet... said...

YEAH!!! I finally figured this clickable slideshow out! I love it AND I finally found the matching blog color to my blog layout so the slideshow looks 'transparent' on my blog. (The color code wasn't on the 'Color Pic' site so I simply went into my HTML template of my blog looking for codes that resembled color codes and found it that way; and low and behold it worked.

Jenilee said...

I can't wait to try this! :) thanks!

Jenilee said...

Just finished mine. You'll have to check it out. the spacing is still funny but it is too late to mess with it tonight... i'll do it though. any suggestions?

Kekibird said...

Thanks!! At first this looked daunting but it ended up being sooooo easy!!!

Tnanks again!

Siddique Saqafi Sidheequi said...

Hai
Your post was so much informative. I applied in my blog. It works well in Mozilla and Chrome, but in Internet Explorer, only the first slide repeats every time. Other slides are not coming in IE 7.. any suggestion, please help me
sidhu........ www.islamxplored.com

Mama Mel said...

Thank you so much for this! I've been trying to figure this out for a long time! You made it so easy! :)

God's Not Finished With Us Yet... said...

I love this feature! It saves a lot of clutter on my sidebar, well not that it's clutter but that it was once sooo long and now it's in a compact little space. I only wish there was a way to speed up or slow down the slideshow so I can get to the blog I want quickly. Oh well can't have it all, huh? :D I use Internet Explorer and at first it was kind of 'skipping' and would only show just a few 'buttons', but after I played around with it a lot I somehow managed to have it flow all the way through. YAY! Thanks for all your tips!!! Your button is in my slideshow too!!! :D

Cathy said...

Thanks so much! I have added your information to my blog since you have helped me so much. Easy to understand and usable instructions. Wonderful!

Can you tell me either how to center the pics on the sidebar or how to make them larger, but NOT TOO big. Is it reducing the size of the pic and then not putting "shrink to fit" on there?

Thanks again!

Unknown Mami said...

So sad! I tried this and it worked great at home on Firefox, but now I'm at work and IE only shows the first two buttons.

Erin said...

I am having the same prob with it only scrolling through the 1st button or so...does it just look that way on MY computer? And if not is there a way to fix it?

Chloe and Co. said...

Again, you are the best! It worked perfectly and on the first time...shocker for me!