Alignment of Ads, Two Horizontal And Rest Vertical – BuySellAds

BuySellAds [BSA] is an advertising marketplace for small to medium sized website owners/publishers. Publisher like the flexibility in charging the advertisers and the easiness with which one can implement the ad codes into their website.
And advertisers like the quality publisher websites, ad rotation feature for equal exposure, stats features and the recently added A/B split testing between multiple ad banners etc.

But A Problem..
If you are using 125 x 125 ad format of BuySellAds and you have many advertisers, then you might have come across the problem of aligning them.

Example:
If you want to have 6 ad spots, as shown in below image.

Advertise-Here

[ 2 x 3 – Two Horizontal and rest Vertical ad spots ]

There is no built-in user friendly option to get this to work. One simple solution for this is, you can generate 2 separate javascript ad codes and paste it inbetween 2 separate div or p tags to somehow align it.

But the Problem
1. Using more ad codes means increase in the load time of the website as a whole.
2. All the ads does not get equal exposure. As we can only rotate the ads present in a single block of code and can not rotate between two separate code blocks.
3. Some time we may forget to change the price of advertising on one block, which will some time become unfair for advertisers.

Better Solution
Generate a single ad code with 6(or whatever you prefer) ad spots and add “float:left;” to the A element of the styles array in the ad code.

Before


BannerStyles1240548 = new Array(
    "a{display:block;font-size:11px;color:#888;font-
family:verdana,sans-serif;margin:0 4px 10px 0;text-align:center;text-
decoration:none;overflow:hidden;}",

After


BannerStyles1240548 = new Array(
    "a{float:left;display:block;font-size:11px;color:#888;font-
family:verdana,sans-serif;margin:0 4px 10px 0;text-
align:center;text-decoration:none;overflow:hidden;}",

Caution
Do not copy and paste the above code, as the quotation marks appearing on a webpage will not work properly in the source code. So just manually add float:left; to the A element of the styles array, as shown above.

Finally
1. You have nice looking source code! with less clutter.
2. Less number of javascript code, so faster loading of your webpage.
3. All the ads rotate and thus equal exposure to advertisers.
4. Single change in the settings of your ad code will be applied to all the ads.

Related: CSS Code To align 125X125 Ad Banner On WordPress Sidebar