I wanted to write this post tonight because it is a question that I get from a lot of my readers and it is a great tool for any blogger to use. This is a very convenient way to squeeze as much content onto your site without having a blog that continues on FOREVER! I want to try and explain in a few steps how you can turn your sidebar into a scrolling sidebar so that you can display an unlimited amount of graphics in a very small space. Before we begin, I want to admonish the following:
PLEASE DO NOT TINKER WITH YOUR HTML CODE IF YOU ARE NOT COMFORTABLE DOING SO.
REMEMBER TO BACK UP YOUR SITE BEFORE PROCEEDING:
First, you should decide wherever you'd like to install your new scrolling image bar on your blog. Most of the time, this will be done on a sidebar, but you could also easily use this code to create an image slide show in a post of yours as well as in the footer region of your blog too. Next, you should insert the following code above the images that you'd like to scroll together:
<center><marquee direction="up" onmouseover="this.stop()" width="144" scrollamount="4" onmouseout="this.start()" height="400"/>
The text that is highlighted in purple can be changed to suit your particular needs. For instance, if you'd like your bar to scroll in a different direction, simply change the text here to either UP, DOWN, LEFT or RIGHT. Next, you can change the width and height of your bar to any value you wish. If you look at my scrolling bar on my left sidebar, I have two of them next to each other. They each have a width of 144 and a height of 400. If you're wondering how I got two of them side by side, it is because I used two tables in the same sidebar. I will be writing a future post soon about how to write basic tables for use in your blog, but that is for another day... I also have a scrolling image bar in my footer region. The dimensions for that bar include a height of 127 and a width of 892. Finally, you can also adjust the scrolling speed of your image bar by playing with the scrollamount number. I personally like the standard value of 4, but you can change this to any whole number to either speed up or slow down the images in this area. The higher the number here, the faster your images will scroll. After you've made the appropriate adjustments to the code above, paste your image information after this code. When you have included all of the images you'd like to scroll in this particular area, end with the following:
</marquee></center>
Here's a complete example to show you what this looks like in action:
HTML Code:
<center><marquee direction="up" onmouseover="this.stop()" width="150" scrollamount="4" onmouseout="this.start()" height="250"/>
<a href="http://www.mommylivingthelifeofriley.com"><img src="http://static.mommylivingthelifeofriley.com/Mommy-Button-GRAY.jpg" alt="Mommy Living the Life of Riley" title="Mommy Living the Life of Riley" width="125" height="125"/></a>
<a href="http://www.mommylivingthelifeofriley.com"><img src="http://static.mommylivingthelifeofriley.com/StickEmUpFriday.jpg" alt="Mommy Living the Life of Riley" title="Mommy Living the Life of Riley" width="125" height="125"/></a>
</marquee></center>
I hope this helps everyone out there who was interested in this topic! If you have any questions, please leave me a comment and we'll talk! Happy Blogging! 
Related Posts You Might Also Enjoy:
Originally posted 2010-03-30 01:01:21. Republished by Blog Post Promoter
22 Responses to How to Add a SCROLLING IMAGE BAR to Your Blog!
melcole Says:
Nice idea about the marquee. It takes time to download all the links. I prefer five to six images per 125 x 125 button though.
Melissa @ Mommy Living the Life of Riley! Says:
Great point! The scrolling image bar does definitely slow your speed’s loading speed down. You must remember how many actual images you have there…I have a really bad habit of not doing that! Before I know it, I’ve got 50 images on ONE scrolling bar! Oops!
Tracyo Says:
Oh wow! This was so easy to do and so easy to install on blogger!! Thanks so much! I grabbed your button and added it to the blog roll! Thanks so much :O)
Mungee's Ma Says:
Thanks for this tutorial! I was actually going to research how to do this. Thanks for stopping by Mungee and Me through Friday Follow. We’re now following your blog as well. Have a great night!
Zoe Right Says:
You are my hero!!!! I’ve been looking all over the Internet for this!!!!
Melissa @ Mommy Living the Life of Riley! Says:
Ha! Ha! I’m so glad I could help! Have a great day!
Marsha Seiberling Says:
wow! I seen your sidebar and wondered, then I seen this post!
So if your example the end number is 250…is that the number that would be used if I get too many buttons and want to have 2 rows like you do?
and then would I just start over with the coding in the same sidebar to make a second one?
Thanks!
Melissa @ Mommy Living the Life of Riley! Says:
No, unfortunately it’s not that simple. In order for you to get two rows of scrolling bars like I have in my sidebar, you have to set up a table with two rows in it. Then if you add the marquee code to each of the rows, then you get what you see in my sidebar. Thanks so much for stopping by my site! Have a great weekend!
jenni Says:
Thank you for the tutorial! Hope you had fun at the Ultimate Blog Party! I’m still trying to visit some more since I had some extra time this week! Glad I got to stop by!!
Jenni (“Miss Tutu”)
and Mom Blogger $100 Cash Contest
My UBP blog post: How to Make a Tutu blog – hope you will stop by, say hi, and grab a free tutu lesson!
~LadyM Says:
nice to know, thanks
Rita Spratlen Says:
This sounds complicated to me but I haven’t tried it. I will come back to this. You are so knowledgeable you ought to write a book for bloggers. I will be trying to check out these tips and will be back to refresh this in my mind. Thanks for the info! Rita
Leave a Reply