| Add a Google Adsense skyscraper down the left-hand side of your board |
| Description: This is how to add a Google Adsense skyscraper down the left-hand side of your board. |
| Author: Charles Sweeney |
| Date: Tue Jun 22, 2004 6:36 pm |
| Type: HowTo |
| Keywords: google,adsense,adwords,banner,skyscraper,bar |
| Category: Miscellanea |
 |
How to - Step by step instructions for phpBB 2.0.8 subSilver
This is how to add a Google Adsense skyscraper down the left-hand side of your board.
Due to Google's conditions, you don't want ads appearing on every page, such as log-in pages, member-lists and search-results pages.
Apart from anything else, you would not get good results here because there is insufficient content to deliver meaningful ads.
The best place to put them is on the index page, the forum page, and the topic page.
The layout of these pages is controlled by (.tpl) template files.
index_body.tpl - For the index page.
viewforum_body.tpl - For the forum page.
viewtopic_body.tpl - For the topic page.
So you need to add your Google code into each of these files.
You will find these files in your forum webspace in this directory:
templates/subSilver
These are just text files. Open them in a text editor, make the changes, then save them. If you downloaded them to edit them, you will need to upload the finished versions to the same templates/subSilver directory.
Basically, what we are going to do is add a table with two cells to each page. The left cell will contain your Google ads. The right cell will contain the forum information.
##########
index_body.tpl
##########
Open this file in your text editor.
Locate these lines in the file (may be lines 12, 13, 14):
<a href="{U_SEARCH_UNANSWERED}" class="gensmall">{L_SEARCH_UNANSWERED}</a></td>
</tr>
</table>
BELOW these lines, include this code:
<table width="100%" border="0"><tr><td valign="top">
google code
</td>
<td width="100%" valign="top">
This section of code should now look like this:
<a href="{U_SEARCH_UNANSWERED}" class="gensmall">{L_SEARCH_UNANSWERED}</a></td>
</tr>
</table>
<table width="100%" border="0"><tr><td valign="top">
google code
</td>
<td width="100%" valign="top">
Replace the words "google code" with your actual Google code.
Here is an example of this section of code including my own Google code:
<a href="{U_SEARCH_UNANSWERED}" class="gensmall">{L_SEARCH_UNANSWERED}</a></td>
</tr>
</table>
<table width="100%" border="0"><tr><td valign="top">
<script type="text/javascript"><!--
google_ad_client = "pub-2034038845161531";
google_ad_width = 160;
google_ad_height = 600;
google_ad_format = "160x600_as";
google_ad_channel ="2542645218";
google_color_border = "006699";
google_color_bg = "EFEFEF";
google_color_link = "006699";
google_color_url = "006699";
google_color_text = "000000";
//--></script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</td>
<td width="100%" valign="top">
Locate these lines (near the bottom):
<table cellspacing="3" border="0" align="center" cellpadding="0">
<tr>
<td width="20" align="center"><img src="templates/subSilver/images/folder_new_big.gif" alt="{L_NEW_POSTS}"/></td>
ABOVE these lines, include this code:
</td>
</tr></table>
This section of code should now look like this:
</td>
</tr></table>
<table cellspacing="3" border="0" align="center" cellpadding="0">
<tr>
<td width="20" align="center"><img src="templates/subSilver/images/folder_new_big.gif" alt="{L_NEW_POSTS}"/></td>
Finished.
##############
viewforum_body.tpl
##############
Open this file in your text editor.
Locate this line in the file (may be line 15):
<table border="0" cellpadding="4" cellspacing="1" width="100%" class="forumline">
ABOVE this line, include this code:
<table width="100%" border="0"><tr><td valign="top">
google code
</td>
<td width="100%" valign="top">
This section of code should now look like this:
<table width="100%" border="0"><tr><td valign="top">
google code
</td>
<td width="100%" valign="top">
<table border="0" cellpadding="4" cellspacing="1" width="100%" class="forumline">
As before, just replace the words "google code" with your actual Google code.
Locate this line (last line in the file):
</table>
BELOW this line, include this code:
</td>
</tr></table>
This section of code should now look like this:
</table>
</td>
</tr></table>
Finished.
#############
viewtopic_body.tpl
#############
Open this file in your text editor.
Locate this line in the file (may be line 1 :
<table class="forumline" width="100%" cellspacing="1" cellpadding="3" border="0">
ABOVE this line, include this code:
<table width="100%" border="0"><tr><td valign="top">
google code
</td>
<td width="100%" valign="top">
This section of code should now look like this:
<table width="100%" border="0"><tr><td valign="top">
google code
</td>
<td width="100%" valign="top">
<table class="forumline" width="100%" cellspacing="1" cellpadding="3" border="0">
As before, just replace the words "google code" with your actual Google code.
Locate this line (last line in the file):
</table>
BELOW this line, include this code:
</td>
</tr></table>
This section of code should now look like this:
</table>
</td>
</tr></table>
Finished.
You can experiment with different skyscrapers to see what suits you best.
I have made my skyscraper in the standard colours of subSilver, these are:
006699 Darkish bluey-green! For the ad border and links.
000000 Black. For text.
EFEFEF Light grey. Ad table background.
I have tested this in Internet Explorer 6, and Mozilla Firefox 0.8
The alignment of the "new topic" and "post reply" buttons is affected. This may, or may not be to your liking. To alter it, you would need to edit the code again, which I haven't looked at.
You can see what I mean here:
http://formtoemail.com/phpbb.jpg
The only other issue is in the topic page at resolution 800x600 where the page is a little too wide for the screen. There's a lot of competition for space there! There's the Google ads, avatars and poster info, plus the post itself, all going across the page.
Having said that, I was using a wider skyscraper, so a narrower one could be the answer here. You can choose various different lengths and widths from Google. If you do, you do not need to change my code! Just change the Google code.
Looks excellent in the other pages, and in all the pages at 1024x768. |
|
|
|
