Placing more than 4 different ads in same horizontal line and width

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.

place 4 ads in single horizontal width
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 :

ALSO READ
How I added 4 Footer Widget Area to my Smf Forum
<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 :

&lt;table&gt;

&lt;td&gt;Your converted adverts 1 code here &lt;/td&gt;

&lt;td&gt;Your converted adverts 2 code here&lt;/td&gt;

&lt;/table&gt;

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

placing many ads in same horizontal width without a plugin

This is my affiliate link image adverts for Hostgator, Godaddy, Lc, Web4africa, Bidvertiser, Chitika and Bidvertiser publishing network

Copy the live code and replace them 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

ALSO READ
How To Become a Super Affiliate In Niche Markets

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

9 COMMENTS

  1. 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

      <a href=”#” rel=”nofollow”>
      <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>

  2. 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

  3. 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

  4. 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

LEAVE A REPLY

Please enter your comment!
Please enter your name here