A Scrolling {clickable} Slideshow!

April 9, 2010

Okay I have a awesome tutorial for you today! This was suggested to me by one of my followers on BlogFrog!
I am going to show you how to make a scrolling {clickable} slideshow!


Why would you need a scrolling clickable slide show?
Well... you can put all your blog buttons in a slide show so they don't take up so much space in your side bar! 
Great idea huh?

This is a fairly simple thing to do. But, if you have questions or need help just ask! :)
First you need to do some blog stocking and find the blog buttons you want to display in your slideshow.
{I would love if mine was included!}


It is probably easiest if you open a word document or notepad and copy and paste all the blog button codes you want to use. But, make sure you leave space in between them.


Now go to your blogger layout>add a gadget>add html


Paste this code into that box:


 

Okay now you just need to copy one of the button codes and paste it on the next line in your html box.
Do the exact same thing with all the button codes. Paste them right after each other.


I would probably add 2 or 3 buttons then save and look at my blog to make sure it is working.
No need to waste time putting all the buttons on if something is wrong :)


 The #ffffff part of the html code is called a hex code. It tells blogger what color to make the background of your slideshow.


#ffffff is white.


If you want to change the color go HERE pick a color and replace the hex code with the new one.


One other note....
Most blog buttons are already made to be centered. However if they are not the blog button will not be in the center of the slideshow.


But guess what???


There is an easy way to fix that! All you need to do is put

at the begining of the blog button code and



at the end!


Happy slideshow making!

11 Comments:

1. Janette P. said...

Hi, found you through the ultimate blog party link - thanks for the post about BlogFrog. I'm going to check it out!

2. CraftyMummy said...

Thanks so much Kendra!!!!!! I'm so glad I came and checked out your blog after leaving that comment! Once I get the kids to bed, I'll be having a go at putting this on my blog... I'll let you know how I go ;)

3. Shawna said...

What a neat idea! I was just doing a bit of blog hopping and found you through Roxanna J.'s blog. I might like to try this out on my blog.

4. Aisyah said...

Great tutorial! I'll give this a try when I have the time. Soon, I hope. I'm always finding ways to make my blog better. Thanks for dropping by at my blog. Appreciate it :)

5. Aisyah Helga said...

Just to let you know that I did it! It was super easy. Thanks for sharing. I'll link this to my blog-Beautify your blog DIY

6. Shopper Gal said...

Hi Kendra,
thanks for your comment on my blog. I love your background and how you have the scroll function on your right sidebar (FUN!). Look forward to chatting more with you on Blog Frog :)
Tessa
{shopper gal}

7. Joy @ Thrifty Parsonage Living said...

I found your blog yesterday with the button swap blog hop.
Great tutorial! I wanted to let you know that I did it! It was very easy, and your instructions were great! Thanks for sharing it with us.
Joy
{thriftyparsonageliving}

8. Amy said...

Thanks for sharing! I'm going to give this a shot this weekend! I'll be sure to add yours! I'm a new follower .. found you on Top Mommy Blogs. Thanks for sharing!
http://thingamajigetc.blogspot.com/

9. The Fallon Schank's said...

This is so cool!!!! But is there any way to make it go faster? Thanks!

10. Cori said...

HELP! For some reason it will only show my first 4 buttons!

cori.benson@gmail.com

11. The Mason Bunch said...

Thanks for helping me out on this. I believe I followed the directions above. I copied and pasted 3 blog button codes to the html window. I previewed like you suggested. The buttons are there, but are not scrolling. What did I wrong? Please help! Thanks.

Post a Comment

thanks for commenting! i ♥ comments!
If you have a question, ask away! Just make sure your email is linked to your profile so I can answer you!