Get 25% Discount For HostGator- $110 OFF! | Series: Become a Pro Blogger!, Create and Sale Ebooks , PDF Editing Ways


Friday, September 11, 2009

125 by 125 Ad Banner Widget For Blogger/Blogspot Blogs.



 

125-by-125-Ad-Banner-Widget

 

Early this morning I tried to create some tables using simple HTML. Remarkably I arrived at a really easy and well optimized code that could be used to show your 125 by 125 Ad banners just like the one on my sidebar. This widget is named “125 by 125 Ad Banner Widget

See an example below,

 

 

 

 

         

 125 by 125 Ad Banners Widget  (1)

AD DESCRIPTION AD DESCRIPTION
AD DESCRIPTION AD DESCRIPTION

Here is the code to be pasted in your HTML/JavaScript Widget,

<div align="center">
<table border="0"  cellpadding="2" cellspacing="6" width="265" bgcolor="#ffffff">
<tbody><tr>

<td><center><a href="URL OF ADVERTISER" rel="nofollow"><img border="0" alt="AD DESCRIPTION" width="125" src="URL OF BANNER’S IMAGE" height="125"/></a></center></td>

<td><center><a href="URL OF ADVERTISER" rel="nofollow"><img border="0" alt="AD DESCRIPTION" width="125" src="URL OF BANNER’S IMAGE" height="125"/></a></center></td>
</tr>
<tr>

<td><center><a href="URL OF ADVERTISER" rel="nofollow"><img border="0" alt="AD DESCRIPTION" width="125" src="URL OF BANNER’S IMAGE" height="125"/></a></center></td>

<td><center><a href="URL OF ADVERTISER" rel="nofollow"><img border="0" alt="AD DESCRIPTION" width="125" src="URL OF BANNER’S IMAGE" height="125"/></a></center></td>
</tr>

</tbody></table>

<table border="0" bordercolor="#0084ce" cellpadding="2" cellspacing="6" width="265" bgcolor="#ffffff">
<tbody>
      <tr>
       <td><center><a href="URL OF ADVERTISER" rel="nofollow"><img width="265" height="37" border="0" alt="Advertise Now!" src="URL OF BANNER’S IMAGE" /></a></center></td>
      </tr>


    </tbody></table>

</div>

 

Now make the following changes,

1.  Replace URL OF ADVERTISER with the website link of the advertiser

2.  Replace URL OF BANNER’S IMAGE with the Image link of the Advertiser’s banner

3.  Replace AD DESCRIPTION with some information related to the Ad. The description appears when some hovers his mouse cursor over the banner.

4.  If you want to increase the distance between the ad blocks then adjust width="265" . By default 265 is the minimum width of this banner widget. You can’t further decrease the width.

 

  • If you want to increase the number of rows of this ad widget and want to add two other Ad blocks i.e 6 ad blocks. Then simply copy paste the code below just above </tbody></table>

<tr>

<td><center><a href="URL OF ADVERTISER" rel="nofollow"><img border="0" alt="AD DESCRIPTION" width="125" src="URL OF BANNER’S IMAGE" height="125"/></a></center></td>

<td><center><a href="URL OF ADVERTISER" rel="nofollow"><img border="0" alt="AD DESCRIPTION" width="125" src="URL OF BANNER’S IMAGE" height="125"/></a></center></td>
</tr>

 

 

  • If you want to have a more fancy Ad widget like the one below,

125 by 125 Ad Banners Widget  (2)

BEST--- 2
3 4
 

ADVERTISE

then copy and paste the code below in your HTML/Javascript Widget

<div align="center">
<table border="0"  cellpadding="2" cellspacing="6" width="265" bgcolor="#ffffff">
<tbody><tr>

<td><center><a href="URL OF ADVERTISER" rel="nofollow"><img border="0" alt="AD DESCRIPTION" width="125" src="URL OF BANNER’S IMAGE" height="125"/></a></center></td>

<td><center><a href="URL OF ADVERTISER" rel="nofollow"><img border="0" alt="AD DESCRIPTION" width="125" src="URL OF BANNER’S IMAGE" height="125"/></a></center></td>
</tr>
<tr>

<td><center><a href="URL OF ADVERTISER" rel="nofollow"><img border="0" alt="AD DESCRIPTION" width="125" src="URL OF BANNER’S IMAGE" height="125"/></a></center></td>

<td><center><a href="URL OF ADVERTISER" rel="nofollow"><img border="0" alt="AD DESCRIPTION" width="125" src="URL OF BANNER’S IMAGE" height="125"/></a></center></td>
</tr>

</tbody></table>

<table border="0" bordercolor="#0084ce" cellpadding="2" cellspacing="6" width="265" bgcolor="#ffffff">
<tbody>
      <tr>
       <td><center><a href="URL OF ADVERTISER" rel="nofollow"><img width="265" height="37" border="0" alt="Advertise Now!" src="URL OF BANNER’S IMAGE" /></a></center></td>
      </tr>


    </tbody></table>

</div>

 

Follow the same steps as instructed above to customize this new code.

If you are searching for some Ad Banner Images than may be you will like the Animated 125 by 125 AD Banners

I hope you will surely like this widget. The internet is full of tutorials for such a widget but most of them use complex CSS and ask you to edit your blogger template but this one is using simple HTML and is a copy-paste widget code. Kindly let us know how you find it.



Respected Readers:
We educate thousands of bloggers a week with our tutorials. To help us go ahead with the same spirit, a small contribution from your side will highly be appreciated.


If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you subscribe to our regular Email Updates!

Thanks for making this possible! Kindly Bookmark and Share it.
Technorati Digg This Stumble Facebook Twitter
Create your own blog!

39 comments:

Comment Page :
Smith said... #

Thks Mohd that is surely a handy widget. I am grateful to you!

Shabnam Sultan on 3:51 AM, September 11, 2009 said... #

Great widget....... i always to wanted to know how to do it as i have blogspot blog.Thanks, for making it seem so simple.

Mohammad Mustafa Ahmedzai on 4:57 AM, September 11, 2009 said... #

you welcome smith and Shabnam

Anup on 10:16 PM, October 11, 2009 said... #

Thank You dude!!!:)
-anup

Hack Tutors

One question, How do you recievs a cash from advertiser?? please give me answer at Hack Tutors http://hacktutors.blogspot.com

thak you!!!

cooll on 2:43 PM, November 10, 2009 said... #

I LOVE YOU DUDE YOU SIMPLEY ROCKS

THANKS,THANKS,THANKS,THANKS,THANKS,THANKS,THANKS,THANKS,THANKS,THANKS,THANKS,THANKS,THANKS,THANKS,THANKS,THANKS,THANKS,THANKS,THANKS,THANKS,THANKS,THANKS,THANKS,THANKS,THANKS,THANKS,THANKS,THANKS,THANKS,THANKS,THANKS,THANKS,THANKS,THANKS,THANKS,THANKS,THANKS,THANKS,THANKS,THANKS,THANKS,THANKS,THANKS,THANKS,THANKS,THANKS,THANKS,THANKS,THANKS,THANKS,THANKS,THANKS,THANKS,THANKS,THANKS,THANKS,THANKS,THANKS,

thanphong07 on 11:27 PM, December 07, 2009 said... #

Thank you !

Manisha.Rautela.Bisht on 3:37 PM, December 10, 2009 said... #

Hi Mohd
This is a great tutorial ,I would like to know how we should register for the ads?how we can search or know right ads to put (resource for ads )?for eg. http://www.thechildhealthsite.com ads I see in many blogs and website ,how do we connect with it and place ad in our website.This info shall help a lot to put few more ads in my site.
Awaiting ur reply
Thanks

Mohammad Mustafa Ahmedzai on 7:23 AM, December 11, 2009 said... #

@Manisha

Adds can either be bought or sell. Bloggers mostly prefer to be publishers i.e show ads on their blogs. You can get ads to display on your blog from many services like agitize.com, buysellads.com and technoratimedia.com. Most of these require more than 100,000 pageviews monthly so I guess at present you go with agitize.

Dieter Groll - Groll Technology on 5:57 AM, December 16, 2009 said... #

Linkshare ( http://linkshare.com) is another one that comes to mind. They represent major "blue chip" advertisers, it's free to sign up as a "publisher" (a.k.a. blogger), and unless you want a platinum membership, there is no minimum traffic or revenue requirement.

@Manisha, specific to the Child Health Site, you can find the links at http://www.thechildhealthsite.com/clickToGive/linktous.faces?siteId=5. You can also get links to other member charities like Animal Rescue, Breast Cancer, Hunger and more by following the tabs across the top of the page. Of course, as these are charitable links, your only profit will be from knowing that you have helped advance the greater good.

SmallPile on 8:27 AM, December 24, 2009 said... #

I just setup my first blogger account and create my new blogger blog, your post is very helpful and help me to setup 125X125 banner display, thank you..

melandria on 2:40 PM, January 03, 2010 said... #

Good day, I tried your formula but it did not work in my blog, i really don't know what is wrong with it. I just copied it and paste it and do the procedure as written. Hope you can help me. Many thanks.

http:///www.melandriaromero.net

Smaracande on 4:07 AM, January 11, 2010 said... #

Hi, thank you for this tips,wish i can use it in my next blogger,no space to add it in this.
http://webizland.blogspot.com

Mohammad Mustafa Ahmedzai on 1:16 AM, January 12, 2010 said... #

@Melandria

Dear your sidebar width is pretty small. These banners look good on magazine style templates that I usually design.


@samaracande

You can easily add it friend by adjusting the sizes a bit. You have enough space on right sidebar.

Samarcande on 7:50 AM, January 31, 2010 said... #

Salam,Thanks dear Mohamed for your advice,it works now,but can't have space between the adds space ..Salam
http://webizland.blogspot.com

Wayne on 1:08 PM, March 28, 2010 said... #

Hey Mo,

Thanks very much for this. Just one question. How can i put a slight border around the ads? Or is it just easier to do it on PS?

Thanks

Mohammad Mustafa Ahmedzai on 8:48 PM, March 28, 2010 said... #

@wayne

Dear simply replace border="0" with,

style="border:1px solid #289728;"

and change the border width, style and colour accordingly.

Replace border="0" as many times as it appears.


Hope this was clear :>

vishkumawat93 on 2:49 PM, May 29, 2010 said... #

Thnx for this great work. May I use some of your posts to my blog. I will also leave a credit link of your blog. My e mail ID is vishkumawat93@gmail.com

Zeegi on 11:30 PM, June 27, 2010 said... #

This is great but now I was wondering if there is a way to hack it.

so every time you refresh it, it will show different image of ads but the same address referring.

I really want one on my blog http://zeegi-comix.blogspot.com/

Mohammad Mustafa Ahmedzai on 4:34 AM, July 02, 2010 said... #

@vishu
You surely can! :>

@Zeegi
That is a good idea and I will share this trick on my next post. Kindly give me a day or two.

Shane at Environmental Health-Wellness-Beauty,LLC on 5:38 AM, August 28, 2010 said... #

So easy and great!! Thanks.

AK 47 on 12:18 PM, August 31, 2010 said... #

Can I use the larger ads with that code and the code will create smallest version by itself !!!

gumbung on 8:55 PM, October 05, 2010 said... #

thanks bro...
nais inpo, and I already replace my ENTRECARD inside widget ad banner, but with more explain. at here http://laptophacker.blogspot.com/

Vande Soul on 1:47 PM, December 11, 2010 said... #

Cool...and it's work...
Thanks...

azgor on 9:48 PM, March 08, 2011 said... #

thanx for, i need this.

azgor on 9:49 PM, March 08, 2011 said... #

thanx for code, i need this.

chetan on 12:48 PM, April 16, 2011 said... #

i din't get plz explain briefly and simply plzzz....bro.

Mohammad Mustafa Ahmedzai on 10:38 PM, April 17, 2011 said... #

@Chetan

Just copy the first code in your HTML/JavaScript widget and Replace URL OF ADVERTISER with the website link of the advertiser
Replace URL OF BANNER’S IMAGE with the Image link of the Advertiser’s banner. That's it. Don't bother read the stuff after step#4. :>

Anonymous said... #

Hi, I cannot make the url's work ( advertiser's urls); on back office i can put a correct html code but on a home page it turns to http://piccolocuoco.blogspot.com/ URL. Can you heklp me? Thanks!

Mohammad Mustafa Ahmedzai on 8:34 PM, May 27, 2011 said... #

@Anonymous

Make sure you are only replacing URL OF ADVERTISER with a URL/link of the advertiser and not some sort of html code.
If possible so then please make your question more clear buddy.

Debby on 3:48 AM, June 06, 2011 said... #

Love this!! I'm using it at the bottom of my blog as a place for my sponsors and affiliates.

Neeraj Rawat on 12:56 AM, August 06, 2011 said... #

Nice one and simple too,bookmarked a long time back just applied today on my site

Blogger Lombok on 7:26 AM, August 26, 2011 said... #

Thanks a lot brother, love your blog so much. Love the way you share.. keep doing your best brother.

Lombok, Indonesia

Faiz Muhammd Khan on 10:50 PM, August 26, 2011 said... #

hmm i m not getting any advertisement for my site , other wise i will definitely use it ! :(

Totalclicks on 2:30 PM, September 15, 2011 said... #

Mohammad can you please tel us how can we get advertiser add ???i have google adsense account how can we get that banner adds??on my blog ??

Martin Horský on 10:48 PM, October 04, 2011 said... #

Mohammad - I like this code and it's a great design - however, it will not display the banners - only the basic outline of the box and the url links to websites. It will also display the comments I altered.
The source for my pictures is Picasa album, where I keep the all my photos for my blog. What am I doing wrong?

thanks, Martin

The Home Treatment on 8:00 PM, October 05, 2011 said... #

just few words for you YOU ARE AWESOME!
http://totopcexpert.blogspot.com

Assees Dar on 12:59 PM, October 18, 2011 said... #

Assalam-O-Alaikum Bro. What To Write At The Place Of Following???
URL OF ADVERTISER
URL OF BANNER’S IMAGE
AD DESCRIPTION
Sorry For Weak English!!!

Ainul Yaqin on 10:55 AM, December 15, 2011 said... #

a lot of information, visit http://info4indonesia.blogspot.com/

Bilal Tanveer Dar on 4:04 PM, February 05, 2012 said... #

by displaying ads from other advertisers will my adsense account will be blocked or not because i once used Kontera ads my adsense account was blocked

Confused? Feel free to ask

Your feedback is always appreciated. I will try to reply to your queries as soon as time allows.

Note:
1. To add HTML CODE in comments then please use our HTML Encoder
2. You can always Try the tutorial on our HTML Editor
3. Please do not spam Spam comments will be deleted immediately upon my review.

Regards,
Mohammad

 

Recent Posts

Join Me On Facebook

4907+ Followers

Join The Team!

Licensed Under CC

Recent Comments

Follow Me On Twitter

1954+ Followers

| My Blogger Tricks (MBT) © 2012. All Rights Reserved | Contact | About |