Ads 468x60px

Pages

Thursday, July 5, 2007

Incorporate AdSense ads in post and wrap text around ad

Please note that in the l is a L and not 1 (one) and the exclamation mark is a ! (exclamation mark).

Important note: Before you make any changes to your template, always backup your current template PLUS Page Elements first. Refer to Backing up and changing New Blogger template.

There are more than one methods. I tested a method at Fish and Fishing and another method at Internet Tips and Tricks. I shall describe the methods below:

Wrapping text around AdSense ads by replacing <!-- with etc.

This was the method I used for Fish and Fishing. You will first have to sign into AdSense account and generate the script for "AdSense for Content" ad unit. If you are not familiar, refer to Generating script for AdSense products. It is best that you know the width of your main column first so that you know what ad format is suitable. It is best you use a browser with tabbed browsing like FireFox. Then you can open a new tab in the same window to sign into your Blogger account. In the Dashboard, click LAYOUT for the relevant blog, then click the TEMPLATE tab followed by the EDIT HTML sub-tab. This will open your template editor. Then look for codes like

#main { float: right; width: 600px; margin: 0px; padding: 0px 50px 0px 0px; line-height: 1.5em; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ }

or

#main-wrapper {
width: 400px;
margin-left: 20px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}

How the codes will be written depend on what template you are using. The first codes above was for the template I used for Fish and Fishing. I will put a link to the template later when I publish another post. The first codes contains "width: 600px;" which tells me that the width of the main column is 600 pixels wide. There are 6 formats which may be suitable for putting into the posts. They are:

336x280 Large Rectangle
300x250 Medium Rectangle
250x250 Square
200x200 Small Square
180x150 Small Rectangle
125x125 Button

As the main column width is 600 pixels wide, and AdSense has said that 336x280 Large Rectangle is one of the better performing format, I chose this format for the blog Fish and Fishing as the main column is wide enough to take this format in comfortably.

Generate your AdSense script as described above and copy it into clipboard. Then go to the tab where you are logged into Blogger. In the Dashboard, click LAYOUT for the relevant blog. Then in the LAYOUT, click the TEMPLATE tab and then the EDIT HTML sub-tab. This will open the template editor. Tick the "Expand Widget Templates" and wait for the template to fully expand. You will then have to look for the codes contain "width: 600px;" which tells me that the width of the main column is 600 pixels wide. In the template, search for the line of code:

<div class='post-header-line-1'/>

If you want an easy way, I would suggest you click on the inside of the template editor window and press ctrl+A keys simultaneously. This will highlight the whole of the template. Right-click and chose "copy" to copy the expanded template into clipboard. Open Notepad and paste the template into Notepad. Click EDIT in menu bar at the top of Notepad and chose "Select all" to highlight all the template. Click EDIT again, but this time chose "Find...". Type or copy-paste all or part of

<div class='post-header-line-1'/>

into the "Find" field. Click the "Find next" button. This will help you quickly find that code and it will be highlighted. Paste your Adsense script below this line of code. For my AdSense script, it is of the form

<script type='text/javascript'><!--
google_ad_client = "pub-9408074638";
google_ad_width = 336;
google_ad_height = 280;
google_ad_format = "336x280_as";
google_ad_type = "text_image";
google_ad_channel = "";
google_color_border = "FFFFFF";
google_color_bg = "FFFFFF";
google_color_link = "5588AA";
google_color_text = "000000";
google_color_url = "0099CC";
google_ui_features = "rc:6";
//-->
</script>
<script src='http://pagead2.googlesyndication.com/pagead/show_ads.js' type='text/javascript'>
</script>


Replace <!-- (in red) with and //--> with HTML closing comment tag

Then add table tags in before and after the AdSense script so that it become

<table align='left'><tr><td><script type='text/javascript'>
google_ad_client = "pub-94080704638";
google_ad_width = 336;
google_ad_height = 280;
google_ad_format = "336x280_as";
google_ad_type = "text_image";
google_ad_channel = "";
google_color_border = "FFFFFF";
google_color_bg = "FFFFFF";
google_color_link = "5588AA";
google_color_text = "000000";
google_color_url = "0099CC";
google_ui_features = "rc:6";
HTML closing comment tag
</script>
<script src='http://pagead2.googlesyndication.com/pagead/show_ads.js' type='text/javascript'>
</script></td></tr></table>


Preview and if satisfied, click "Save template"

Removing the comment tags <!-- and //-->

Another way is to remove the comment tags completely, which was the method I used for Internet Tips and Tricks. In this case, from the code

#main { float: left; width: 440px; margin: 5px; padding: 0px 5px 0px 0px;

this shows the width of the main column is only 440 pixels wide. So this time I chose the 250x250 Square format. The method is exactly the same as above, but instead of replacing Replace <!-- with and //--> with HTML closing comment tag, I just removed the comment tags completely, so that what I have is as shown below (with the <div class='post-header-line-1'/> to emphasise where the script should be placed):

<div class='post-header-line-1'/>

<table align='left'><tr><td><script type='text/javascript'>
google_ad_client = "pub-94081704638";
google_ad_width = 250;
google_ad_height = 250;
google_ad_format = "250x250_as";
google_ad_type = "text_image";
google_ad_channel = "";
google_color_border = "FFFFFF";
google_color_bg = "FFFFFF";
google_color_link = "5588AA";
google_color_text = "000000";
google_color_url = "0099CC";
google_ui_features = "rc:6";

</script>
<script src='http://pagead2.googlesyndication.com/pagead/show_ads.js' type='text/javascript'>
</script>
</td></tr></table>


As usual, preview, and if satisfied, click "Save template".

Note: AdSense only allow 3 AdSense for Content units per page. So if you incorporate the unit into the post, theoretically, you will have one AdSense units in each post. So if you have the default 7 posts for the main page, you will have 7 AdSense units in each posts plus any other Ad units in the sidebar/s and/or footer and/or Header. AdSense suppresses any excess units so that only the first 3 units (which 3 depends on your template) are displayed. For most of my blogs, only the first 3 units in the first 3 posts will get displayed and if I have skyscraper unit in my sidebar and leaderboard unit in the footer, these plus the ad units in the rest of the posts will be suppressed. It is only when you are in an individual post page (permalink) where there is only one post that the skyscraper unit in the sidebar and the leaderboard unit in the footer plus that one unit in the post get displayed. I have tried this once for one blog and asked AdSense Support if it is OK and their response was that it is OK for THAT blog. They left the question about applying the same thing to other blogs hanging, so one doesn't know if we have to ask each time we apply the same thing to other blogs.

If you want to be safe, you may want to set the main page to display less posts in the main page, etc., or write to AdSense Support for clarifications.

Acknowledgement: The idea of using <table> was obtained from Wrap text around Google AdSense but was modified and an alternative way was presented. Further, she used an image to display the HTML which means you can't copy the HTML direct from the site. I use special codes to display the HTML characters so that you can copy the HTML direct from this site to use for your hack.

Any problems, please comment in the post. One reader has complained about confusing l (L) with 1 (one). This has been clarified with a note right at the top of the post. He also commented on some problems with the table tags. I have retested the method described here in Generating Revenue from your Website, and for the table tags, I just use copy-paste from the script in the scroll box above. The method worked perfectly, so there is NO PROBLEM with the table tags.

0 comments:

Post a Comment