[resources.invisionpower.com - pliki] Skinning > Adding Google Ads / Banners to the Header

[DawPi]

Made by Tom Christian of Skinground.com

Introduction

This tutorial will teach you a simple method of adding an advertisement banner or Google Ads to the header in IPB3. The new template code can seem very daunting at first, but after a while it is infact very useful.

The first thing to notice is the new "User_navigation" block on the far right of the header. This is going to cause problems so a simple method to overcome this is by using "Absolute" positioning.

With google ads, or paypal donate buttons the code they supply you is different so you will need to adjust my codes slightly in order to cater for your own code. We want to keep our coding standards compliant so we will be using the html for structure and IPB's CSS for positioning / styling.

Here is an example of the final outcome:

Stage 1 - Adding the HTML

Navigate to: Admin CP > Look & Feel > Skin Dropdown Button > Manage Templates & CSS > Global Templates > globalTemplate

Find:

</div>

<if test="memberbox:|:$this->memberData['member_id']">

Add Above:

<a href="#"><img src="https://www.google.com/adsense/static/en_US/images/banner.gif" alt="Donate Now!" class="googleads" /></a>

Stage 2 - Adding the CSS

Click save, then navigate to:

CSS Tab > ipb_styles.css

Find:

/************************************************************************/

/* ELEMENT STYLES */

Add Below:

.googleads {

position: absolute;

right: 325px;

top:23px;

}

Stage 3 - Definitions

Save and refresh your page. You will now have a google ad example image correctly positioned in your header. Before I

move onto the next example I will explain how everything works.

The CSS

.googleads {

position: absolute;

right: 325px;

top:23px;

}

.googleads { - This is the name of the class. It must be exactly the same when specified in the HTML.

position: absolute; - Absolute positioning allows us to position our image/code wherever we like on the page.

right: 325px; - 325px inwards from the far right of the board.

top:23px; - 23px exactly downwards from the top of the board.

The great thing about absolute positioning is that it will scale nicely with most screen resolutions. It's also compatible in all modern day browsers and even most old ones including IE4.

The HTML

<a href="#"><img src="https://www.google.com/adsense/static/en_US/images/banner.gif" alt="Donate Now!" class="googleads" /></a>

<a href="#"> - This is an HTML Link. Replace # with your own link. (Google ads will supply all of this for you)

<img src="https://www.google.com/adsense/static/en_US/images/banner.gif" - This is an HTML image tag. Replace the image

url with your own. Once again, google ads will do all of this for you.

alt="Donate Now!" - This is an alt tag. Put whatever you want here. It is what appears when you hover the mouse over an image.

class="googleads" - This is the most important part. This is the class we're pulling from the CSS.

Stage 4 - Alternatives

An alternative way of positioning your google ads or advertisement banners in the header without editing your code is by creating a new div in the layout. To do this -

Navigate to: Admin CP > Look & Feel > Skin Dropdown Button > Manage Templates & CSS > Global Templates > globalTemplates

Find:

</div>

<if test="memberbox:|:$this->memberData['member_id']">

Add Above:

<div class="googleads">

Your HTML code inserted here!

</div>

Stage 5 - The End

You can play around with the CSS in order to position your banner wherever you like in the header. But remember that the user navigation block gets wider when in guest view.

Tip: When adding images that are uploaded into your IPB image folder, the new path code is: {style_images_url}

Example - I want to display test.gif on my IPB index. I'd use this code:

<img src="{style_images_url}/test.gif" alt="test" />

Thanks for reading. If you find any problems with the code or any typo's then please tell me Wyświetl pełny artykuł