Write at HWS !!!

Guest Posting

Monday, April 25, 2011

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


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.

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.



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!

2 comments:

Confused? Feel free to ask

Your feedback is always appreciated. I will try to reply to your queries as soon as time allows.
Note:-
Please do not spam Spam comments will be deleted immediately upon my review.

Regards,
XEO Hacker

Post a Comment

Twitter Delicious Facebook Digg Stumbleupon Favorites More

 

Recent Posts

Join Me On Facebook

200+ Followers

Followers


meet women in Ukraine contatore visite website counter
DMCA.com

Recent Comments

Follow Me On Twitter

1112+ Followers