Navigate
X

How to Add a SCROLLING IMAGE BAR to Your Blog!

5/5 - (2 votes)

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

Tags: Blog Tips
Melissa @ Mommy Living the Life of Riley: 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, that 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!

View Comments (20)

  • 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.

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

  • 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??!! =-.

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

  • 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.

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

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

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

  • 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.

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

  • 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)

Leave a Comment