javascript

BuySellAds: Faster and Better(Show ads vertically with a click)

We all know that internally Google is thinking of considering site loading speed as one of the criteria for ranking the website. Apart form that, faster loading sites are key for grabbing user attention.

BuySellAds has come up with an innovative idea of making the javascript ad codes asynchronous(as they call it).

When any browser downloads the ad code that displays the ads, it blocks everything else on the page from rendering. And, while this process may take less than a second of the user’s time, it is noticeable and it is a big problem.

You can read more at BSA blog.

It is frustrating some times, when my visitors have to wait for the ads to load before they could see the entire page. Now I am happy as BSA is taking every effort to minimize that wait time. Infact, what I understand by reading their blog post, is that, with the new ad codes implemented visitors need not wait. i.e., the javascript codes as well as the other elements of the page load simultaneously. Thats great. So from now, we need not compromise user experience for making some pocket money(of course which is used for paying hosting and other expenses – coffee included!)

Faster is Ok, but I said “Better” in the title? It is because, a known issue for BSA publishers is alignment of the ads(problem with vertical alignment of ads). Now BSA has made it simpler. i.e., if we have implemented the new ad codes, now we can log into our BSA a/c, click on get code and make changes(make ads align vertical) and hit SAVE and the settings will be applied to the ad boxes on our site…..isn’t it better?

Additionally, you can even style your ads from within the BSA a/c – see below screen shot.

Previously we had to add float: left; to the a tag of the code. But people with no css knowledge what so ever, found it very geeky/confusing. So now, alignment of ads isn’t a problem with BSA ads.

If you had made any custom changes to the styling of your old code, then you need to add those changes to the new codes by applying them in the advance settings area in your BSA a/c.

Update:

To Show ads: 2 horizontal and the rest aligned vertically, you need to uncheck the vertical checkbox, and add float: left; to Anchor Style in the Advanced Settings of your BSA a/c. And don’t forget to SAVE the settings!

I highly recommend you to grab the new ad codes and make your site load faster.

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.

[ 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.

Image Rollover Effect – using Simple HTML

When visitor roll mouse pointer over a image, s/he will see a different image, when s/he moves mouse pointer out of the image focus, s/he will see the previous image. This is called RollOver Effect. This method is mostly done using JaveScript. It is used mainly on images, while building menu etc.

Yesterday I had written an article about OnlineProfits re-lauch and I had used rollover effect to one of the images there, and some people asked me how I did it(Simple Ans: See the source code 😉 ).
So here is the simple code to achieve this design effect:

<a href="Destination Address" 
ONMOUSEOVER='thinkwithsatish.src="ImageURL-when-mouseover" ' 
ONMOUSEOUT='thinkwithsatish.src="ImageURL-when-mouseout" 
'><center><img src="ImageURL-to-be-shown-by-default" 
NAME="thinkwithsatish"/></center></a>

Explaination:
ONMOUSEOVER and ONMOUSEOUT are valid JS effects. Since all most all browsers support JS, this works fine.

Give a name to the actual image to be displayed:
<img src="URL-of-default-image" NAME="thinkwithsatish"/>
I have named above tag src as thinkwithsatish. Now Refer to this name by using ONMOUSEOVER and ONMOUSEOUT commands.

ONMOUSEOVER='thinkwithsatish.src="ImageURL-when-mouseover" '

ONMOUSEOUT='thinkwithsatish.src="ImageURL-when-mouseout" '

Hope the rest of the code is self explanatory.

Code in action!:

Now you can test it by taking your mouse pointer in and out of image area. If you don’t see any changes, place the mouse pointer over the image for some time – because in some cases, it takes some time to load.

I see that, it works perfectly in Mozilla FireFox, Internet Explorer and Chrome. I haven’t tested it in other browsers. And interestingly, I saw it working even in RSS feed!

Many people use content management system software like WordPress, to publish their content. So in order to include a RollOver effect using JavaScript means – editing the header part or installing a plugin which does the job etc. So instead we can incorporate this simple coding to get the design effect.

Design Tip: This is just the coding/programming part. To get the effect on the design, you must choose such images which will have good effect on users mind. So choose the images wisely.

I am not sure, how helpful it is to you. But it surly helps me sometime to get some minimal design effects on my WordPress blog posts.

Code To Show 125X125 Ad Banner On WordPress Sidebar

During the early days of this blog, we had some problem in showing adsense ads of 125×125 format on our sidebar. We wanted to have four 125×125 ad banners(as shown in below image), but we were unable to align it properly. After some research and getting help from online friends we could overcome this problem. Now we are sharing this, in order to save some of your time, who may also be facing the same problem.

Its easy to show image ads(direct advertisers ad banner) in the side bar. But if we want to show ads using some adnetwork(Ex:- Adsense, Adbrite, Bidvertiser, BuySellAds etc), its bit difficult to properly align the ads(as shown in above image).

First the simple one. If you want to show some ad banners(which does not use JavaScript or any other scripts). You can use the following code:


<h2>Sponsors</h2>
<!-- insert ad blocks instead of fake images -->
<a rel="nofollow" href="destination-url">
<img style="margin: 0 15px" height="125" width="125" 
src="image-url"
 border="0" title="insert title" alt="insert title" />
</a>

<a rel="nofollow" href="destination-url">
<img height="125" width="125" 
src="image-url" 
border="0" title="insert title" alt="insert title" />
</a>
<a rel="nofollow" href="destination-url">
<img style="margin: 0 15px" height="125" width="125" 
src="image-url"
 border="0" title="insert title" alt="insert title" />
</a>
<a rel="nofollow" href="destination-url">
<img height="125" width="125" 
src="image-url" 
border="0" title="insert title" alt="insert title" />
</a>

But the same can’t be applied when you want to show some JavaScript enabled ads(Ex:- Adsense, Adbrite, Bidvertiser, BuySellAds etc) in above mentioned style.
To do that, add below code to your style.css


.bigblock {
  width: auto;
  height: auto;
  padding: 15px;
       
}

.left-top {
  width: 125px;
  height: 125px;
  background: url(images/125x125.jpg) no-repeat;
  margin-bottom: 10px;
       
}

.left-bottom {
  width: 125px;
  height: 125px;
  background: url(images/125x125.jpg) no-repeat;
  }

.right-top {
  float: right;
  width: 125px;
  height: 125px;
  background: url(images/125x125.jpg) no-repeat;

}

.right-bottom {
  float: right;
  width: 125px;
  height: 125px;
    background: url(images/125x125.jpg) no-repeat;

}

.clearblock {
  width: 100%;
  clear: both;
}

Now insert below code wherever you want to show the ads(Ex:- sidebar)


<div class="bigblock">
<div class="right-top">Ad code</div>
<div class="left-top">Ad code</div>
<div class="clearblock"></div>
<div class="right-top">Ad code</div>
<div class="left-bottom">Ad code</div>
</div>

That’s it, you are done. You can play with above coding to customize it further to blend with your blog design.
Hope it helps, atleast for some of you.