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.
Pretty cool of you !!.
I’m planning to shift to WordPress soon and this post should help me.Thanks..
Excellent post dude!!! i was really happy when i found what i was searching for long when i stumbled here from something..
keep up good work!!!
@Arun, Glad to know that it helped you..
alllllllo satish see u again.i want ask u,erm,how to make advertise in my site?same type u advertise in http://technotip.org/advertise/.
tried this but it’s not working in my theme sigh*
i really want to add ads in my sidebar
hope to find someone who can help me 🙂
@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.
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!
@sterndal, hey sorry. Its style.css and not style.php [updated the post]. Thanks.
satish, thank you so much for your help!
cheers!
@sterndal, You are always welcome.
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.
@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.
Hello, i am unable to show the image…using this code…..
“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!!!!!!!
@hari, Use the following code:
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.
Thanks a million for posting this. Man CSS can be maddening sometimes. This worked for me.
@Jaden, @Webbie, Great to know that it worked for you.
Thanks so much for this – I was tearing my hair out! You are helping to prevent baldness in website owners!
Thanks soooo much! I have been struggling with this for a few days my ads were getting all wild on me. I appreciate it
Thankx for this Blogpost. Is there a way to show 125×125 google Ads in the Sidebar?
@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.
Thank you soo much! I have been struggling with this for a few days. I really appreciate it.