This is a fun one to do - instead of having every blog button in a separate box, straggling down your sidebars, you can neaten them up into one scrolling marquee.
You can adjust this so the box scrolls upwards or down, and also adjust the speed and the width of the pictures. This is great for grab buttons, blog awards, favourite sites - and the buttons are clickable too!
Next, construct your scrolling marquee.
Most blogs will have a sidebar between 180px and 220px wide, so you don't want the marquee to be wider than that or it will stick out into the blog background.
You also don't want the marquee to be too long - as it will take forever for the pix to roll round, and you'll have a lot of blank space. So, if you have a lot of buttons to add, you might want to make it 400px in height. If you only have a few, maybe 250px high will be enough. You can always adjust this later.
Copy&paste this code into the top of actual box.
<center><div class="textwidget"><marquee direction="down" width="200" onmouseover="this.stop()" scrollamount="5" onmouseout="this.start()" height="300" align="center">
This is the start of the script instruction.
Give yourself a few spaces, then copy and paste this code at the bottom of the box. This is the end of the script instruction - all your links will be sandwiched between them.
Button codes will go in between these two codes, like this typical grab button code:
<a href="http://1stfloorflatblogology.blogspot.com/"><img border="0" src="http://i385.photobucket.com/albums/oo299/susiejefferson/b2d7dab3.jpg"/></a>
Just keep adding as many buttons as you like. However, each button code you add MUST start with <a href= and end with </a> or it won't work.
If the buttons are too close together when scrolling, separate each block of code with either of the codes shown in the pix.
Making a scrolling marquee is easy if your links are grab buttons, because they will have all the coding for the button done already.
Don't panic - there IS a way...
Click to edit the picture link, which will open the link box for you as you see here.
Copy the url and put this in the first part of the coding (the address of the link) starting with:
<a href="http and finishing with ">
Right-click on the picture and click Copy Link Location, then paste into the second part of the code, beginning src="http and ending with /a> (the source of the picture or object). That's it!
Normally, putting a space between each picture is easy (see the codes in the illustrations).
This works beautifully with blog buttons, as they all tend to be made pretty much the same size (a little smaller than the average sidebar, ie: 180px - 220px, depending on the template). But what if you are putting odd sizes in your marquee? Some very narrow... and you want to put some text or a caption underneath (say, blog awards or cards and tags)...
Then your spacing is all over the place, as you can see. Making a space doesn't always make the caption go underneath, if there is room for it to go to the side.
This is when you need to put in a line break.
THERE'S NO URL!
Another problem you might find, when transferring your picture into a marquee from a picture widget - is that you loaded it from your computer at home, and therefore do not have a url.
Enter the picture by right-clicking the Copy Link Location into the second section, as before. The code will look like this:
<a href=""><img border="0" src="http://i385.photobucket.com/albums/oo299/susiejefferson/b2d7dab3.jpg"/></a>
I'VE GOT TONS OF BUTTONS TO ADD
You have a lot of buttons to add - it's going to take forever! Well, it is tedious and you do have to pay attention, as a space between a section of code, like this: " http will break the code and stop it working.
But you can speed things up by writing one entry in full, with spaces or breaks where you want them, then copy&paste this several times. Then go back in and amend the urls to the addresses you need.