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

• Share This Post
• Twitter
• Facebook
• Digg
• StumbleUpon
• Delicious
• Reddit
• Feed RSS

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 shown on the left side picture.Till now we have learn the use of Windows Live Writer and now we are moving towards adding a very cool widgets to our blogger template This widget is named “125 by 125 Ad Banner Widget”

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

<---- www.hackwithstyle.com Add Banner code starts here ----->
<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>
<---- www.hackwithstyle.com Add Banner code ends here ----->

 
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

<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 then copy and paste the code below in your HTML/Javascript Widget

<---- www.hackwithstyle.com Add Banner code starts here ----->
<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>
<---- www.hackwithstyle.com Add Banner code starts here ----->

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

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. 

That’s All!

I hope this widget will help a lot in giving a clean and neat touch to your blogs. Any question is welcomed.

About the Author

I am XEO Hacker, the founder of Hack With Style (HWS). I am blogging since 2009 before that I just search things and now I am sharing my knowledge through this plateform.I'm also a freelance writer on topics related to Website Hacking,Website Optimization (SEO), blogger customizations and making money online.

Follow @xeohacker

In 61 people's circles

Subscribe To Get FREE Tutorials!

Respected Readers: As a 21 year old student, the only income I rely on is my pocket money. Bearing the running costs of HWS Blog has become really difficult. We educate thousands of bloggers a week with our tutorials. To help us go forward with the same spirit, a small contribution from your side will highly be appreciated.

Posted in: Blogging