good to great: rotating sponsor ad graphics

I'm about to do something I've never done here before. I'm about to share a technical tutorial. I've shared Good to Great ideas before, but this time I'm going to show you how to use javascript to get all fancy on your blog. Did you just fall off your seat? Oh wait...that was me.

I've taken a teeny bit of HTML in college (it was a while ago), and everything else I've learned has been from playing around with code, and by doing some Googling. Code can make me crazy, and sometimes I let other people do it for me, but there are times when I just need to fix something myself, and I do. There is a huge sense of satisfaction when I figure it out! So now you can too. (At least, I hope you'll be able to figure this out from me...remember this is my first code tutorial!)

If you haven't noticed, I have some awesome sponsors each month. I love them, and I'm not just saying that. Each of these sponsors deserves to be noticed, and so I try to rotate the location of their ads during the month so they get more viewing by you, my wonderful readers. Doing this manually is difficult, and I've not been convinced that it was all that effective. I wanted better.

After much searching and trying things out (because Blogger doesn't have a gadget for this), I found the way to have all of my ads change locations each time the page reloads. To see what I'm talking about, you need to be on the actual blog. See the ads? Refresh your page, and they'll change. All of the ads are still there, they just moved around. Exactly what I wanted.

If you have sponsors on your blog, or if you have some images that you want to rearrange in your sidebar, here's what you do:



In Blogger, click on the design tab, then add a gadget to your sidebar.



Choose the HTML/Javascript gadget. You'll get a box to add your code to, but first you need some code. Move that little box to the side, and then head to this site for the code. You'll need to copy all of the text that is in the box for "Step 1."



Paste the code into the Blogger box that you moved to the side. Now, go back to this site, and copy all of the code that is in the first gray box.



Paste it under the text that you already added to the Blogger box. Take a look at the image, and you'll see some text that is different from what you get from the Javascript Kit website. But it's close.

First, I have a line that starts with the img tag. That's the graphic that says "sponsors" in my sidebar. This doesn't apply to the rotation, so it doesn't need special code around it.

Next, there is the div tag that is just like the copied code. This is "group1", and it will remain at the top.

Under that is the link and image tags that display Amy's ad. It is the only x-large ad I have, and it is its own group..."group1".

Then the div tag closes.

The "div", "a href" "img" and "/div" sections all repeat, but with the label "group2". This grouping is all of my large ads, and they will all shuffle locations. Every large ad has this "div" tag with the "group2" label on it.

Sara's ad is the first that you see here, but all the rest are the same. And it doesn't matter what order you have them in, because they'll all show up in a different order each time.

Make sense?



After all of the ads have the code surrounding them, go back to the site, and grab the code from the last gray box. Paste it at the very bottom of the Blogger box, then save.

If everything went as planned, all of your ad graphics should be showing up, and they should be shuffling locations each time you refresh the page. Your sponsors will love you!

Oh, and since today is the last day of the month, some of my sponsors will be changing over tomorrow, so it's a good day to point out that you should give these blogs a visit!