How to Add a SCROLLING IMAGE BAR to Your Blog! | Family-Friendly Reviews | Giveaways | Mom Blog

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! 

Originally posted 2010-03-30 01:01:21. Republished by Blog Post Promoter