Saturday, July 9, 2011

WRAPPING TEXT AROUND ADSENSE ADS BY REPLACING

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 toGenerating 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"

No comments:

Post a Comment