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.
