A perfectly centered Adsense banner below the navbar that is loaded AFTER other ADs

A perfectly centered Adsense banner below the navbar that is loaded AFTER other ADs

Mod Version: 1.00, by StarBuG

vB Version: 4.0.2	Rating: (3 votes - 5.00 average)	Installs: 12
Released: 30 Mar 2010	Last Update: Never	Downloads: 0
Not Supported Template Edits Re-usable Code

Hello everyone.

I had the following problem:
I want to show a leaderboard banner below the navigation centered.
My leaderboard was clicked only half as often as the banners I showed in the thread as 2nd post.
So I wanted to load my leaderboard banner AFTER the 2nd post banners so that they get the highest paying keywords.

I found a complex but perfect solution for this:

The settings for my forum:
vBulletin 4.0.2
Fixed width for the forum and the forum is centered.
The banner position is exactly 253px from the top.

In Template ad_global_below_navbar add:

Code:

<div id="ads_navbar_container"></div>

Click Save

The ads_navbar_container creates an empty "box" that spans from left to right and has a hight of 100px.
This is the background box on which I will display the adsense banner.

In Template ad_footer_end add:

Code:

<div id="ads_navbar_container_2">
 <div id="ads_navbar">
   YOUR ADSENSE CODE HERE
 </div>
</div>

Click Save

This is the actual Adsense Leaderboard.
It is wraped inside a container (ads_navbar_container_2) that is positioned from the top to fit inside the box we created before (in this case 253px from the top).

After that we define the AD in ads_navbar and center it within the previous container.
If you use other banner formats change the width to fit the banner width.

In Template additional.css add:

Code:

#ads_navbar_container {
    border: 1px solid #CECECE;
        background: #EBEDF0;
        width:100%;
        height:100px;
        margin-left: auto;
    margin-right: auto;
}
#ads_navbar_container_2 {
    position: absolute;
    top: 253px;
    left: 0px;
    width: 100%;
}
#ads_navbar {
    position: absolute;
    width: 728px;   
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}

Change the colors of the background box to colors that fit your theme.
Adjust the top position to fit your layout.
Change the banner width and box height if you use other formats then a leaderboard.

Click Save

E voila, a perfectly centered banner that is loaded last (displays the lowest paying keywords).

If you want to load it in between 2 other ads, simply search for an ad template that is loaded after the first and before the second and put the ad code there instead of the footer ad template.

In my case I only did this "trick" for banners that are shown to guests which are viewing a thread.
That is done via conditionals.

Instead of the above add the following to your ad_global_below_navbar template:

Code:

<vb:if condition="THIS_SCRIPT != 'showthread'">
 <div class="ads_navbar_container">
  <div class="ads_navbar">
   YOUR AD CODE HERE
  </div>
 </div>
<vb:else />
 <vb:if condition="THIS_SCRIPT == 'showthread' AND $show['guest']">
  <div id="ads_navbar_container_guests"></div>
 </vb:if>
 <vb:if condition="THIS_SCRIPT == 'showthread' AND $show['member']">
  <div class="ads_navbar_container">
   <div class="ads_navbar">
    YOUR AD CODE HERE
   </div>
  </div>
 </vb:if>
</vb:if>

In Template ad_footer_end add:

Code:

<vb:if condition="THIS_SCRIPT == 'showthread' AND $show['guest']">
<div id="ads_navbar_container_2_guests">
 <div id="ads_navbar_guests">
   YOUR ADSENSE CODE HERE
 </div>
</div>
</vb:if>

Click Save

In Template additional.css add:

Code:

.ads_navbar_container {
    border: 1px solid #CECECE;
        background: #EBEDF0;
        width:100%;
        margin-left: auto;
    margin-right: auto;
}
.ads_navbar {
        position: relative;
        width: 728px;
        margin-left: auto;
    margin-right: auto;
}
#ads_navbar_container_guests {
    border: 1px solid #CECECE;
        background: #EBEDF0;
        width:100%;
        height:100px;
        margin-left: auto;
    margin-right: auto;
}
#ads_navbar_container_2_guests {
    position: absolute;
    top: 253px;
    left: 0px;
    width: 100%;
}
#ads_navbar_guests {
    position: absolute;
    width: 728px;   
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}

Best regards

StarBuG

http://www.AdSenseExperts.com

http://www.adsenseexperts.com/consulting/adsense-optimization-service.html

Download

No files for download.

Screenshots

vBulletin LTS