Blog Ad Rotator with HTML and JavaScript

#adspace {

}

#adspace img {

}

Over the past few weeks I've been bombarded with requests for a tutorial on how to make ads rotate when the page is refreshed. You know I aim to please, so I put together a bit of code and a tutorial to show you how it's done!

What You'll Learn

I'm going to show you how to set up ads on your blog that swap position when the page is refreshed. This is for image ads you sell directly to sponsors or swap with other bloggers — it doesn't work with AdSense or other ads served through an ad network.

Live Demos

The following live examples of different configurations each use the same basic code. Make sure to refresh the demo pages a few times to see the images change places:

• A two-column layout with six small ads that swap places on page refresh (live demo here)
• A single-column layout with three larger ads that swap places on page refresh (live demo here)
• A leaderboard banner that only shows one ad at a time out of a group of 4 ads (live demo here)

Difficulty

This tutorial is suitable for strong beginners. If you've worked your way through a tutorial or two of mine in the past, you're totally ready for this.

If you're new and you'd like to try an easier tutorial first, try my Simple HTML Image Gallery tutorial, which teaches you how to write the HTML used in this code. Once you've worked through that tutorial, you're very well prepared for this one!

Compatibility

This works on any blog platform that allows you to add HTML & JavaScript gadgets or widgets. Blogger and Typepad users, you're all set.

Self-hosted Wordpress users can use this in conjunction with the HTML/JavaScript Adder plugin. This will not work on free Wordpress.com blogs.

Ready to get started? Let's get to it!

First, Upload Your Ad Images

Your images need to be hosted online before you can use them in your ad space.

On Blogger, you can upload your images to your Picasa Web Album for your blog, or your favorite image hosting service. Typepad users can upload images to the File Manager. If you're on self-hosted Wordpress, upload your images to your media library.

After you've uploaded your images, leave your image hosting open in another tab and come back to the tutorial, you'll need direct URLs to your images soon.

Next, Open Up the Code in Codepen

I've uploaded an editable version of all of the code you need to get started on Codepen. On Codepen, you can edit and preview your code in real-time so you can make sure it's all correct before you add it to your blog.

You can open up the Codepen in a new tab/window by clicking the "Edit on Codepen" link on the preview window below, or you can click here.

//
var ads = ();
ads(0) = '<\/a>'
ads(1) = '<\/a>'
ads(2) = '<\/a>'
ads(3) = '<\/a>'
ads(4) = '<\/a>'
ads(5) = '<\/a>'

var x = 0;

function rotate(ads) {
while (x < ads.length) {
var sort = Math.floor(Math.random() * ads.length);
if (ads(sort) != 0) {
document.getElementById('adspace').innerHTML = (ads(sort));
ads(sort) = 0;
x ;
}
}
}
//


//
rotate(ads);
//

See the Pen %= penName %> by mariemosley (@mariemosley) on CodePen

When you first open up Codepen, the preview window will show a bunch of text all run-together, like this:

That's not what your ads are going to look like! That's just the raw material.

Next, Set Up Your Ads

No matter how many ads you're running or what size you want them to be, the basic code setup is the same. I've added instructions to the code in ALL CAPS to show you where to place the ad details. Here's what to put where:

• First, replace FIRST SPONSOR URL HERE with the link to your first sponsor. Leave the quotes in place.
• Next, replace FIRST SPONSOR IMAGE URL HERE with the direct link to your first sponsor's ad image. Again, leave the quotes in place. Make sure to link directly to the image, not the page the image is displayed on in your image host's gallery.
• Then, replace FIRST SPONSOR NAME with the name of your first sponsor. And leave those quotes in place, of course!
• Replace WIDTH HERE with the width of your image. For example, if your images are 125px wide, replace WIDTH HERE with 125. Do not add px after the width value, and again, make sure to leave the quotes.
• Replace HEIGHT HERE with the height of your image. I don't need to remind you to leave off the px or leave the quotes in place, right? ;)

Once you're finished with that, the code for your first ad space will look something like this:

ads(0) = '

'

You'll also see your first ad in the Codepen preview window, mixed in with the word jumble you saw before.

Don't worry, we'll fix that layout as we go!

Repeat the same process for each of the additional ads. If you need to add more ad spaces, make sure to increase the ads( ) number for each additional ad.

If you don't have enough ads to fill all of the spaces, remove the extra ad spaces from the bottom of the ad group.

One Extra Step for Leaderboard Ads

This is only for leaderboard ads; if you're doing sidebar ads you can move on to the layout.

To set your leaderboard ads to show one at a time, scroll down to the line of code that reads:

document.getElementById('adspace').innerHTML = (ads(sort));

Remove the from that line and your ads will show one at a time.

Next, Set the Adspace Layout

At this point, all of the blue text you saw when you first opened up Codepen should be replaced by your ad images (if it's not, go back over the last step again). But, your ads probably aren't laid out quite right yet.

Scroll down through the code until you find the

tag. You'll find two empty CSS rules there, one for #adspace and one for #adspace img.

What you'll do with each rule will depend on what layout you need for your ads. Here's how to use them:

The #adspace Rule

For a single column of ads or leaderboard ads, enter the width of your ads inside the #adspace rule. For example, if I was running a single column of 250px wide ads, I'd write it like this:

#adspace {
width: 250px;
}

For two columns of ads, enter 2 times the width of your ads 10 pixels inside the #adspace rule. This allows your images to line up in columns while leaving room for a bit of spacing we'll add in the #adspace img rule. In this example, I'm setting up two columns of 125px ads:

#adspace {
width: 260px;
}

If you'd like to center the ad space, add margin: 0 auto; below the width declaration, like this:

#adspace {
width: 250px;
margin: 0 auto;
}

The #adspace img Rule

If you're running a leaderboard ad, you can delete the #adspace img rule. This one is used to set spacing for groups of ads that are shown together.

If you're running large ads in a single column, you may want to add some space between the ads with a bottom margin inside the #adspace img rule, like this:

#adspace img {
margin-bottom: 5px;
}

If you're running two columns of ads, Add a float: left; to the #adspace img rule, and right and bottom margins to put some space between the images in a two-column layout. Try this to start:

#adspace img {
float: left;
margin-right: 5px;
margin-bottom: 5px;
}

You can adjust the margins by increasing or decreasing the pixel value of the margins. You can change the float to right if you like (keep in mind that float: center; doesn't exist).

Now, Add the Adspace to Your Blog

At this point your ads are rotating and your layout looks great. Now it's time to add your code to your blog! Copy all of the code from the HTML block on Codepen and paste it into:

• A new HTML/JavaScript gadget on Blogger.
• A new HTML/JavaScript Adder widget on self-hosted Wordpress.
• On Typepad, use the "Embed your own HTML" option in your Content menu.

Save your widget/gadget and go check out your ad space!

How the Rotation on Refresh Works

This code selects ads to rotate at random. This means you may see the same ad in the same position a few times in a row. That doesn't mean the code isn't working. Think of it like flipping a coin — you'll often get the same result from lots of flips.

If your ads never change places on page refresh, then something is wrong. Double check your code to make sure everything is in place from the original code and you've filled in all of your ad slots properly.

Show Off Your Work!

Now that you've set up your rotating ads, I'd love to see them! Leave me a comment with a link to your blog, Tweet at me @codeitpretty, or get in touch on Google .