 | |
|---|---|
| |
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.
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>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).
<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>
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.
58 comments
Write commentsVery Useful !!
ReplyAnkit from your page: http://exclusivearena.blogspot.com/2008/03/copyright-policy.html
ReplyI 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.
Hi Dsai,
ReplyMan 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__
Hello Mohd,
Replywell 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
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.
ReplyPretty 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.
ReplyBut 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!
Of course table tags are used to display tabular data...and so am I using it. The ad banners are my tabular data :)
ReplyBasically I like to keep things simple !
Don't you think that instead of doing this by table ,it will be better create with b:section and CSS .
ReplyOf 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.
ReplyAs 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 :)
Tabea... Met Baku Dapa n Salam Kenal.... Thanks,-
ReplyHey 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 !
ReplyYou 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 !
ReplyHi, 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?
ReplyBrilliant
ReplyHow do i know dat how much i am earing with these ads?
Replyhey 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....
Replyam waiting 4 yu respond..........
i loved it and added ec widget in the ad space.. thank you sai .. please contact me.. manoj.0790@gmail.com
ReplyGreat 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.
ReplyI have done what you told. But whrn I click on the advertisement.. it says that the page does not exist. whats the problem??
ReplyFirst you have to create that page buddy !
ReplyGood Picture
Replytest :D
ReplyThanks! 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.
ReplyGlad it helped you :)
Reply& Thanks for the linkback. If you need any help, plz mention the blog address, I will definitely help you if I can.
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!
ReplyQuestion: 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!
Hi there,
ReplyWhat'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.
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.
Replythanks in advance
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
Replythanks in advance
Well, you can somply register at buysellads.com and they'll give you the necessary code that will display those banners.
Replythank you sai
Replythanks 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..
ReplyThis was a very very important post to me.
ReplyDude You rockkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk!
Nice post. I will try it. Thx.
ReplyI 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,
ReplyDude You rockkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk! I'll only add ABSOLUTELY to that
Thanks. I'll go implement it right away.
Thanks for the code for the ads.
ReplyI 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.
hai, nice to meet u..i follow your step for add the new ads, but i cannot do it , how to add? thks
Replythanks dude i m adding the 125x125 ads to my blog
ReplyThis widget is very useful especially for those who are using blogspot domains since they cannot register to buysellads...Thank you very much for sharing!
Replyhow can i make multiple button (7) in one row
Replyi 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/
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.....
ReplyPut the a href tag around the RED colored image tags. Search on Internet on "how to hyperlink a picture"
ReplyI look forward to trying this out -- thanks for the info.
Reply~Amanda
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..
ReplyThanks for this. Very very easy!
Replycan't figure this out, can't find html/javascript
ReplyWhen you click on "Add a Gadget" in Design -> Page Elements
Replythen the 5th/6th option is Add HTML/JavaScript widget, click on it and proceed further with the tutorial.
finally..... i found this trick...
Replythanks 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/
THANK YOU FOR THIS IMPORTANT INFORMATION.....MOBILETRACKER
ReplyYour blog is very helpful. Thanks!
ReplyHey;
ReplyMy 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......
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
ReplyGreat 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.
ReplyThanks!
Really Great Thanks for this great widgets ;)
ReplyThanks works like magic...:)
ReplyExcellent.....
ReplyComments are moderated on this blog
Allowed HTML tags: <b>, <i> and <a>
Comment Like This! and Optimize your blog EmoticonEmoticon