This is a short tutorial burn out of the high request by my loyal blog Readers asking about doing this in various cms powered websites. Now lay hands on this short tutorial on Trick to place more than 4 different ads from same / seperate Networks to appear in same horizontal line & width in blogger , wordpress , joomla , smf and other cms powered websites.
Achieving this is as easy as abc provided you know what you are doing, this tips is also very good if you are trying to promote affiliate links or products banner let’s say of 125*125 having your content area width as 625, then you should be having 5 different ads in just one horizontal width of 125.
This may turn out this way considering a total ads space of 625*25 you should be having something very similar to the image above. Now let’s proceed to the main guide for implementing this kinda ads
For blogger.com / blogspot.com cms blog
(a) Follow all the needed steps in our previous post here to convert each of your individual ads and paste them differently each on a separate notepad text editor or (b) leave them unconverted if you wanna use convert them at once option below
Next you need now use the table code below to make your ads display along horizontal line like what you see in the blog footer area
for option (b)
<table>
<td>Your adverts 1 code here </td>
<td>Your adverts 2 code here</td></table>
Just multiply the “<td>Your adverts 1 code here </td>” line to as many ads you have created if you plan using more than two, if not just replace this lines “Your adverts 1 code here ” ” your advert 2 code here” with your JavaScript / html … then use the tools here to convert the entire tables to blogger supported format then add it immediately above :
<data:post.body/>
to have it display above your contents after title or immediately below
<data:post.body/>
to have it display after your content just before comments
for option (a)
Use the table code below :
<table>
<td>Your converted adverts 1 code here </td>
<td>Your converted adverts 2 code here</td>
</table>
repeat the step above for the placement .
For wordpress, sms , joomla , smf , custom coded / Dreamweaver sites
Just follow the previous post here for tips
N/b for any other blogging platform or site you need not convert any code just use them the way you copied them from your ads services provider
Demo Live Code
This is my affiliate link image adverts for Hostgator, Godaddy, Lc, Web4africa, Bidvertiser, Chitika and Bidvertiser publishing network
Copy the live code and replace it with your own html image link, JavaScript, and css advert codes
<div style="margin:auto; text-align:center;"> <table>
<td><a href="http://secure.hostgator.com/~affiliat/cgi-bin/affiliates/clickthru.cgi?id=liveencyclopedia-" target="_blank"><img src="http://tracking.hostgator.com/img/WordPress_Hosting/125x125-animated.gif" border="0" /></a></td>
<td><a target="_blank" href=""><img src="" border="0" width="125" height="125" alt="Your Domain. Your Website. All for $1/mo.!"/></a></td>
<td><a href='http://www.linkcollider.com/register.php?r=5muc4'><img src='http://www.linkcollider.com/images/lcbanner_125x125.gif' alt='Link Collider' /></a></td>
<td>
<a href="http://www.web4africa.net/clients/aff.php?aff=1340"><img src="http://forum.3ptechies.com/web4.jpg" alt="Web Hosting" width="125" height="125" /></a></td>
<td><!-- Begin BidVertiser Referral code -->
<script language="JavaScript">var bdv_ref_pid=293832;var bdv_ref_type='i';var bdv_ref_option='p';var bdv_ref_eb='0';var bdv_ref_gif_id='ref_125x125_blue_pbl';var bdv_ref_width=125;var bdv_ref_height=125;</script>
<script language="JavaScript" src="http://cdn.bidvertiser.com/referral_button.html?pid=293832"></script>
<noscript><a href="http://www.bidvertiser.com/bdv/BidVertiser/bdv_publisher.dbm">affiliate program</a></noscript>
<!-- End BidVertiser Referral code --></td>
<td><a href="http://secure.hostgator.com/~affiliat/cgi-bin/affiliates/clickthru.cgi?id=liveencyclopedia-" target="_blank"><img src="http://tracking.hostgator.com/img/Shared_Red_Blue/125x125-animated.gif" border="0" /></a></td>
<td><!-- Begin BidVertiser Referral code -->
<script language="JavaScript">var bdv_ref_pid=293832;var bdv_ref_type='i';var bdv_ref_option='ah';var bdv_ref_eb='0';var bdv_ref_gif_id='ref_125x125_green';var bdv_ref_width=125;var bdv_ref_height=125;var bdv_ref_loc=1153363;</script>
<script language="JavaScript" src="http://cdn.bidvertiser.com/referral_button.html?pid=293832"></script>
<noscript><a href="http://www.bidvertiser.com/bdv/BidVertiser/bdv_publisher.dbm">affiliate program</a></noscript>
<!-- End BidVertiser Referral code --></td>
</table> </div>
You can copy and use this code format
Also note that this code contains 7 different affiliate banner link ‘cos my theme width is large enough to contain 125*7
remove just the extra lines between the <td></td> to reduce the banners to any number your theme or layout can carry
lost any steps ? leave a comment
nice post boss
This is simply cool. HTML Tables can come in useful for a whole number of web design stuff and this is a perfect example. Thumbs Up.
Thanks for dropping by to comment Oscar. You are very much right about that
i must confess, i like the look of your site it really shows you know how to play with css.
Thanks a lot Kelvin for those Kind words, we just keep trying so hard to improve day by day
Wao,never thought this could be possible,am in love with your two recent posts,thanks for sharing this
Thanks Ebimablog for finding this little tweak very useful. I’m looking forward to providing really deep css hacks in my future tutorials
Am really impressed with this tutorial, and i can tell you really know what you are doing. Do you know how to create table with image and clickable links? just like what can be done with tablepress (wordpress plugin)
Ceejay, you actually made me to add the demo code , just copy and replace accordingly to have your code working just right for you. You can place simple html image link like this one
<img border=”0″ src=”http://evomeclimited.com/ebima.png” alt=”Obasimvilla.com teaching on how to maximize affiliate banners ” width=”125″ height=”125″/></a>
in between the separating <td> </td>