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)
 |  |
 |  |
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)
| | |
| | |
|
|
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:
|
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!
39 comments:
Thks Mohd that is surely a handy widget. I am grateful to you!
Great widget....... i always to wanted to know how to do it as i have blogspot blog.Thanks, for making it seem so simple.
you welcome smith and Shabnam
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!!!
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,
Thank you !
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
@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.
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.
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..
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
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
@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.
Salam,Thanks dear Mohamed for your advice,it works now,but can't have space between the adds space ..Salam
http://webizland.blogspot.com
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
@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 :>
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
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/
@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.
So easy and great!! Thanks.
Can I use the larger ads with that code and the code will create smallest version by itself !!!
thanks bro...
nais inpo, and I already replace my ENTRECARD inside widget ad banner, but with more explain. at here http://laptophacker.blogspot.com/
Cool...and it's work...
Thanks...
thanx for, i need this.
thanx for code, i need this.
i din't get plz explain briefly and simply plzzz....bro.
@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. :>
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!
@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.
Love this!! I'm using it at the bottom of my blog as a place for my sponsors and affiliates.
Nice one and simple too,bookmarked a long time back just applied today on my site
Thanks a lot brother, love your blog so much. Love the way you share.. keep doing your best brother.
Lombok, Indonesia
hmm i m not getting any advertisement for my site , other wise i will definitely use it ! :(
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 ??
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
just few words for you YOU ARE AWESOME!
http://totopcexpert.blogspot.com
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!!!
a lot of information, visit http://info4indonesia.blogspot.com/
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
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