May 26, 2009

Add 125x125 Ad Slots To Your Blogger/BlogSpot Blog



Presently 125x125 ad-spots are the most famous ad dimensions in the blogosphere. For both publishers and advertisers these dimensions are perfect to display text & pictures attractively and at the same time these ads do not interfere much with the blog's content.
So if you are too planning to sell some place on your blog with these 125x125 ad spots, then follow these simple instructions:
Although many bloggers place and control these ad-spots through CSS but I am using simple HTML tables, so as to keep the process simple and so that you can easily customize it later.

STEP 1:
Log in to Blogger, go to "Layout", and click on "Add a Gadget" -> select it as "HTML/JavaScript".
Paste this code into the HTML box:
<center><table border="0"><tr>
<th width="126" height="126" align="center"><img src="http://i44.tinypic.com/2v97vv9.jpg"/></th>
<th width="126" height="126" align="center"><img src="http://i44.tinypic.com/2v97vv9.jpg"/></th>
</tr><tr>
<td width="126" height="126" align="center"><img src="http://i44.tinypic.com/2v97vv9.jpg"/></td>
<td width="126" height="126" align="center"><img src="http://i44.tinypic.com/2v97vv9.jpg"/></td>
</tr></table></center>
The code in blue represents "no. of columns" (2 blue lines=2 columns) and code in purple represents "no. of rows" (2 purple lines=2 rows).

STEP 2:
Save the widget.

STEP 3:
As soon as an advertiser approaches you, replace the links in RED in the code above with the new ads.

TIP: Instead of showing all 4 banners as "Advertise Here", it is better to use 2 or 3 of them to show any affiliate ads and keep the last one as "Advertise Here" banner.

You may use any of these "Advertise Here" banners:


This tutorial was requested by Mohammad Mustafa Ahmedzai from TNT-by-STC.


59 comments:

Ankit said...

Very Useful !!

Divya Sai said...

Ankit from your page: http://exclusivearena.blogspot.com/2008/03/copyright-policy.html
I hope you understand copyright & IPR well, & the same rules are applied for other bloggers too......so in your latest article(multi-dropdown menu) although you have given the credits to BloggerStop, but a link is missing in the credits....as soon as you put up the link, send me the post url.

Mohammad Mustafa Ahmedzai said...

Hi Dsai,

Man I am extremely thankful to you for writing this post.
Well Dsai replacing that red text which refers to Image URL will only show the advertiser's image. I mean how to add a link to it so that when some one clicks it, the banner will take him straight to the advertiser. Can I use this code instead of that red text,
<a href="URL of Advertiser"><img src="URL of Pic" /></a>
Correct me if I am wrong
I liked that orange template designed by you. I am soon going to write a post on free blogger templates and I will surely let my readers know of your template through a link back.
I happy that you are back on work!
Regards,
MOHD__

Mohammad Mustafa Ahmedzai said...

Dsai plz share the CSS one too! I will be waiting for that. But for the time being I will bear these.

Divya Sai said...

Hello Mohd,

well of course you have to link the advertiser's site, that is what you are paid for :)
And yes using <a href="*"> is the correct way.

And I am really glad that you liked the new template....thanks for your feedback.

& regarding the CSS hack, actually in that one, there's a small problem of aligning it properly, so I havn't written about it.
Anyways, I have given a live link to the site, which has instructions to add the css widget, if you want....try that & in case of any problems,,,,,,of course you can comment here :)

Regards
Sai

AB said...
This comment has been removed by the author.
Sai said...

It's alright ankit....thnks for updating your post....waise I guess there's some problem in your comment form, it wasn't loading I visited your blog yesterday and today.

thegands said...

Pretty well example my friend. But this example lack of meaning semantic rule of html. Table html tag is should be used to display any tabular data.

But if you want still need a table structure, without using table tag, you can use div tag by setting up your wrapper div display to table, and your row div display to table-row and the last set the cell div display to table-cell.

This may cost your time a little, but its better than using table tag.

Keep rock on dude!

Divya Sai said...

Of course table tags are used to display tabular data...and so am I using it. The ad banners are my tabular data :)
Basically I like to keep things simple !

Preetish said...

Don't you think that instead of doing this by table ,it will be better create with b:section and CSS .

Divya Sai said...

Of course you can do this using CSS too Preetish, but using tables is also fine, as this is just a simple widget and not the part of the template.
As I have already said, I have recommended this method so as to keep the process simple, if I do this using CSS, then it may look quite complicated to some newbie bloggers :)

N. Raymond Frans said...

Tabea... Met Baku Dapa n Salam Kenal.... Thanks,-

$@! said...

Hey man ... so how can i get advertisers and how can i get a broker like buyandsell ads because i want to set it to 5$ /month !

Sai @ Blogger Widgets said...

You have the answer in your query...join buysellads.com and follow their instructions...but the bottomline is you must get lots of traffic to impress the advertisers, that's it !

मोगरा फुलला said...

Hi, I had tried this trick for uplading images in my blog post and it is working. However, I want to add three images of 100 X 133 in my blog post with the title below in one row like this which is not working properly, as you see there is huge space between 2nd and 3rd image. Can you please write something on this?

Anonymous said...

Brilliant

Anonymous said...

How do i know dat how much i am earing with these ads?

Arafin said...
This comment has been removed by a blog administrator.
Anonymous said...

hey sai i need a subscribe by email widget on my blo....but am not getting a proper 1.........can u post something kind of a customizable email subscribtion widget.......but b4 dat pls see my blog http://hack-krishna.blogspot.com and make sure that even i can use it on my template....
am waiting 4 yu respond..........

Manojkumar said...

i loved it and added ec widget in the ad space.. thank you sai .. please contact me.. manoj.0790@gmail.com

Sarah said...

Great post! I just linked to it on my own blog of tips and tricks for bloggers. There are so many things you can do with that format.

Demon said...

I have done what you told. But whrn I click on the advertisement.. it says that the page does not exist. whats the problem??

Divya Sai said...

First you have to create that page buddy !

Jogjarumah.com said...

Good Picture

Spooky said...

Thanks!

Anonymous said...

test :D

Crafty Girls Workshop said...

Thanks! This was very helpful and exactly what I was looking for. Now I'm just trying to figure out how to change the margins of the block of ads. I'll certainly link to your helpful website as my source.

Divya Sai said...

Glad it helped you :)
& Thanks for the linkback. If you need any help, plz mention the blog address, I will definitely help you if I can.

Owner of Homeschool Faith and Family Life Website said...

Thank you very much! I've been searching for the "how-to's" on this and your explanation has been, by far, the most useful!
Question: I tried to change the code in red to reflect some of the other banner choices you made available to us at the bottom of your post and I couldn't seem to get it to work.
Is it because those images are in GIF form? DO I need to convert them to jpg?
Thanks again for helping the "little guy" get ahead!

Sai - BloggerStop.Net said...

Hi there,
What's the blog address you are working on, and tell me the banner which you liked, I will give you the link to that image.

bala said...

hi dsai i want to add banner in my blog.how to add it in my blog.after the creation of banner how can i get advertiser.pls hlp.
thanks in advance

bala said...

hi sai i want to add banner like this ( http://lh5.ggpht.com/_LApL4wnUO3Q/S7Sm4Q6L3AI/AAAAAAAAAAU/Gzs5Byy8Bi8/s400/ADS.JPG ) when click the adverteise here picture the link was redirect to buysellads.com.how to add like this.please give me a code for that.pls hlp
thanks in advance

Sai - BloggerStop.Net said...

Well, you can somply register at buysellads.com and they'll give you the necessary code that will display those banners.

bala said...

thank you sai

Anonymous said...

thanks it works...but if i want to make the ads in Flash format,what should i do?.i want to put ads in .swf format..thanks..

Anonymous said...

This was a very very important post to me.
Dude You rockkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk!

Blackspreen said...

Nice post. I will try it. Thx.

Naomi from girls seeking guys said...

I have wondered and wondered how to achieve this and now BAM! I land at your website and it is staring at me in the face. As Anonymous said above,
Dude You rockkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk! I'll only add ABSOLUTELY to that
Thanks. I'll go implement it right away.

Michael Searles Media said...

Thanks for the code for the ads.
I modified the code slightly so that I could publish the 125x125 ads in a single column of 4 given that the Blogger settings I use give me two narrow side bars.
The pics are the ones you gave permission for re-use (thanks) and I have re-saved and hosted them at tinypic.com.
The addresses of each are below -
http://i56.tinypic.com/n6dgew.png
http://i56.tinypic.com/2nr5zs.png
http://i55.tinypic.com/2ly3oeo.png
http://i55.tinypic.com/2u6n3ty.png

Depending on the current date you can see my own use of the your code on my blog at -
Michael Searles Media
Anybody who wants the code for the single column of 4 ads can email me and I will gladly send it to them via reply email.
Use the Contact Me tab on my own Blogger blog.

KeLIy CHeOng said...

hai, nice to meet u..i follow your step for add the new ads, but i cannot do it , how to add? thks

shenoyjoseph said...

thanks dude i m adding the 125x125 ads to my blog

Watchville said...

This widget is very useful especially for those who are using blogspot domains since they cannot register to buysellads...Thank you very much for sharing!

gustosa giveaways said...

how can i make multiple button (7) in one row
i want to put the friends blog button at the bottom of the blog which is currently at the right sidebar
http://gustosa-giveaways.blogspot.com/

ARC™ said...

not really good bro. how do u make those clicks go to a particular link? all stated above is 'how to place the photo' not linking them.....

Sai - Blogger Widgets said...

Put the a href tag around the RED colored image tags. Search on Internet on "how to hyperlink a picture"

House Revivals said...

I look forward to trying this out -- thanks for the info.
~Amanda

Anonymous said...

thank u very very much.......... i have searching from 3 days for this post tday found it... its very simple and useful... thank u sai..

Frugal Invitation said...

Thanks for this. Very very easy!

Bob said...

can't figure this out, can't find html/javascript

Sai - Blogger Widgets said...

When you click on "Add a Gadget" in Design -> Page Elements
then the 5th/6th option is Add HTML/JavaScript widget, click on it and proceed further with the tutorial.

Sen said...

finally..... i found this trick...
thanks a lot....

but i wanna ask you about how to make 3 columns footer like yours? My blog template is 2 columns with no footer...

This is my blog

http://digisen.blogspot.com/

mobile tracker said...

THANK YOU FOR THIS IMPORTANT INFORMATION.....MOBILETRACKER

Oriana from Mommyhood's Diary said...

Your blog is very helpful. Thanks!

Nishant Agarwal said...

Hey;
My blog(http://tricksbynish.blogspot.com) already consist of these 125x125 ads spaces but could you please tell me that how 2 fill that spaces wid ads and i'm already connected with amazon ads. Please help me out......

Stephanie said...

Thanks so much for the coding! How do you make more rows? For example, maybe 2 columns by 3 rows? My blog is mylilpumpkinpatch.blogspot.com. I would like to get all my sponsors lined up evenly. Also, do you know how to make them all the same size? Mine are acting weird. Thanks

Sahil Kotak said...

Great tutorial, but I had a question. Does 125x125 ad get's much clicks? I haven't tested it and was looking for some sources who can help me.

Thanks!

Glenn M said...

Really Great Thanks for this great widgets ;)

Bennix said...

Thanks works like magic...:)

Muhammad Tasneem said...

Excellent.....

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

comment on this post Share Your Views

Allowed HTML tags: <b>, <i> and <a>

Join and share your views with other bloggers at BloggerStop Community

Comment Like This! and Optimize your blog...

SPAMMER OF THE MONTH: www[.]TopRankLinks[.]com

Next Post Homepage Previous Post

Regular Readers


What They Say...

Divya Sai is the ingenious webmaster of Bloggerstop.Net. Divya is extremely patient, knowledgeable and responsive... Bloggerstop.net has an abundance of articles on creating widgets, templates, hacks and ways to make your blog search engine friendly.
- Stacey @Pets With Allergies
I stumbled onto a great site. Sai, over at Bloggerstop.net has helped me tremendously and with great patience...for any and all questions regarding computer issues. And again, THANK YOU Sai.
- Cheryl @Cmash Loves To Read

More Here...

Popular Posts

Get this widget

| © 2010 BloggerStop.net | Blogger Widgets | Template by Dicas Blogger | Enhanced By Divya Sai | Privacy Policy