How to Add a SCROLLING IMAGE BAR to Your Blog

Fans
18155
Followers
13500
Subscribers
6413
September
12

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

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="http://www.mommylivingthelifeofriley.com"><img src="http://www.mommylivingthelifeofriley.com/wp-content/uploads/2010/09/Mommy-Button-GRAY.png" 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://www.mommylivingthelifeofriley.com/wp-content/uploads/2012/06/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!  :-)

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

    liz Says:

    1

    I’ve tried that code before, and what happens is it starts to move, but then quickly “restarts”. It doesn’t continuously go. Any thoughts on how to rectify that?

    Thanks for writing the post, though! I think it’s an awesome thing to have on the sidebar.

    Lindsay Says:

    2

    I’m glad you wrote this. When I was trying to figure mine out, it took me FOREVER and there was no great tutorial anywhere. Thanks!

    3

    wow great post! i wish i was as tech savvy as you. i’m still dumbfounded as to why wordpress deleted my comments…haahaa. thank you for stopping by and for your kind comment :-)
    .-= luvtoeat.wordpress.com/´s last blog ..WTH WordPress??!! =-.

    Melissa Says:

    4

    Hi Liz,

    I’ve never seen that happen before where this code won’t make the images continuously roll. This is the code that I use on my sidebars…maybe there was another javascript active on your blog that was causing interference. If you want, please post a clip of your sidebar code and I will see if I notice anything that’s causing it. Thanks!

    liz Says:

    5

    I’ll attempt it again, and then copy and paste here. The tutorial I found was pretty much, if not the exact, same as yours, and the girl who posted it had received a bunch of comments saying the same thing (that it didn’t continuously roll, but restarted after 2 or 3). Not sure what the deal is.

    Emmi Says:

    6

    That’s awesome! Thanks so much! I’ve been wondering how to do it and your directions were so simple!!!

    7

    Thank you, thank you! I’ve been wanting to do this for awhile and just couldn’t figure out to make it work!

    DeeC Says:

    9

    Hi there…new follower from Friday follow…and I love this…I just instaled it onto my blog as I was loving the buttons, but not loving how cluttered it made it! Thank you for sharing this information…you are great!

    melcole Says:

    10

    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 Says:

      11

      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:

    12

    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)

    13

    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:

    14

    You are my hero!!!! I’ve been looking all over the Internet for this!!!!

    16

    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 Says:

      17

      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:

    18

    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”)
    My UBP blog post: How to Make a Tutu blog – hope you will stop by, say hi, and grab a free tutu lesson! :-) and Mom Blogger $100 Cash Contest

    ~LadyM Says:

    19

    nice to know, thanks :-)

    20

    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

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

Please Leave a Comment

How to Add a SCROLLING IMAGE BAR to Your Blog! 5.00/5 from 1 vote(s)

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

CommentLuv badge
More in Tips, Techniques, How-Tos & Advice
Injury Prevention
Ken Levinson’s Top 5 Tips for Child Injury Prevention

More children will visit the emergency room this time of year due to near-drownings than any other type of injury.  All of the fun kids have at lakes, parks and...

Close