Tag: align

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.

buysellads-new-settings

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:

Advertise Here
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.

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.

Advertise here

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.