Code To Show 125X125 Ad Banner On WordPress Sidebar

Advertisement:

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.

26 thoughts on “Code To Show 125X125 Ad Banner On WordPress Sidebar”

  1. @Rohit, WordPress is lot easier and more fun. There are many plugins to make the site work as we want it to work!
    Will be eager to see you shift to WordPress. If you need any help, contact me any time.

    @ro, Just get the inspiration from my “advertise” page and write your own, that’s the key!

    @sterdal, Tell me what error you are getting?
    Its very easy to add this to your sidebar. Do exactly, as said in the above article and comment back here. I will be happy to help you out.

  2. hi satish

    do all themes have style.php?

    i don’t seem to have that in my file manager

    all i found is style.css

    is that the same?

    thank you!

  3. I wish there was a way to show 125×125 ads of google adsense in the sidebar when using WP125 plugin. I use it and I find it too hard to embed the 125×125 ad code in the sidebar.

    Damn it.

  4. @Team Nirvana, The method explained in above post will make it very easy to embed 125 x 125 adsense ads(or any other java script ads) to be embedded to sidebar.
    The advantage of hand coding is the flexibility we get, if we want some customization in the future.

  5. Hello, i am unable to show the image…using this code…..

    
    <!-- insert ad blocks instead of fake images -->
    <a href="destination-url" rel="nofollow">
    </a>
    

    “image-url” unable to find the mage url, i have saved image in,
    “/public_html/blog/wp-content/themes/constructor/images/banner125.jpg”

    can you help me to let me know the image url!!!!!!!

  6. @hari, Use the following code:

    
    <!-- insert ad blocks instead of fake images -->
    <a href="destination-url" rel="nofollow">
    <img src="http://urdomain.com/blog/wp-content/themes/constructor
    /images/banner125.jpg"/>
    </a>
    

  7. Thanks so much I have spent an hour or more trying to find how to align my ads like this and nothing was working! Cheers.

  8. @Linda, Nice to know that tearing of my hair, helped same many others!!

    @Derek, Happy To know that it helped.

    @Uncut Patch, You could insert adsense ads too using above code. In adsense 125 x 125 text ads are available and not image ads.

Leave a Reply