How to Add a SCROLLING IMAGE BAR to Your Blog

5/5 - (2 votes)

Blog Basics Scrolling Image BarI 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:



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:


Here's a complete example to show you what this looks like in action:

Mommy Living the Life of Riley Mommy Living the Life of Riley

HTML Code:

<center><marquee direction="up" onmouseover="this.stop()" width="150" scrollamount="4" onmouseout="this.start()" height="250"/>

<a href=""><img src="" alt="Mommy Living the Life of Riley" title="Mommy Living the Life of Riley" width="125" height="125"/></a>

<a href=""><img src="" alt="Mommy Living the Life of Riley" title="Mommy Living the Life of Riley" width="125" height="125"/></a>


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!  :)

I'm a former 7th grade Science teacher turned stay-at-home mom that lives in Houston, Texas. I am married to my college sweetheart and have a beautiful daughter named Riley, who definitely keeps me on my toes! I am also involved in starting a small business which would both manufacture and sell an invention that I've patented, called Toothpaste 2 Go. I love interacting with my readers and hope to learn as much about you as you learn about me!

Melissa @ Mommy Living the Life of Riley!
Add Melissa Cleaver to your LinkedIn Network
Add Mommy Living the Life of Riley to your Google+ circle

21 Responses to How to Add a SCROLLING IMAGE BAR to Your Blog!

  1. Pingback: Top 13 Things to Scrap from Your Blog IMMEDIATELY! Build a Faster Blog Series

Please Leave a Comment

5/5 - (2 votes)

"Say what you mean and mean what you say, but don't say it mean." Thanks! :)

CommentLuv badge