Mar 2, 2007

Rounders, Adsense and New Blogger

Google says placing Adsense above the fold so that ads are prominently displayed produces the best results. I've found that the link unit 728x15 ad like you see in Blogatech's header above is the most profitable on this site. In this post I will show you how to place a 728x90 Leaderboard or 728x15 link unit ad in New Blogger's Rounders template between the header and main post area like shown below:



!!Before making any revisions to your template be sure you have a back-up copy!!

You will need to create a CSS element that formats the placement and color attributes for your ad. I call this #Goog. and it will need to be added into the style sheet section of your template. If your not familiar with this part of the New Blogger layouts type template, it is towards the top and comprises a large portion of the code. It begins with this opening tag:
<b:skin><![CDATA[/*
and ends with
]]>
You can add the following CSS anywhere in this section as long as it's after a closing bracket }.

Use this CSS for a 728x90 Leaderboard Ad:
#goog {
height: 90px;
margin-bottom: 4px;
margin-top: 15px;
padding-top: 3px;
background: #FFFFFF;
}

Use this CSS for a 728x15 Link Unit Ad:
#goog {
height: 20px;
margin-bottom: 4px;
margin-top: 15px;
padding-top: 3px;
background: #FFFFFF;
}

The background color code above is white but can be replaced with a color code that matches your Google ad. See this page for color codes.

Once you have inserted the above CSS, you will need to create the Goog division inside the HTML portion of the template. Locate the portion of code in your template shown in black below and add the lines shown in red:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1'>
<b:widget id='Header1' locked='true' title='testing (Header)' type='Header'/>
</b:section>
</div>
<div id="goog">
Your Parsed Google Adsense Code Goes Here
</div>
<div id='main-wrap1'><div id='main-wrap2'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div<</div>

Assuming that you have already created your leaderboard ad, you would normally place the script that Adsense has given you between the two code lines in red above but with New Blogger you will have to take one more step. Since the new layouts template is constructed with XML which doesn't like Google's script, you will have to run it through Adsense parsing software such as found at the bottom of this page.
This program is just a quick way of removing all the special HTML characters.

You then take the newly generated Adsense script and paste it in the Goog division you created, which is between the two lines in red above. Review your changes and if everything is as you want, save your template and your done.


Technorati Tags: , ,

2 comments:

Bendz said...

Hi,

Useful tip.

I want to add a google ad in the header. (upper right corner.) But I don't know how to do that :(

Have u got any idea?

:-)
Meditation

Dragon said...

Hi, really thanks for the tips. however i face some problem and hope you can help me out.

after i paste the google ad code in between the "div id='goog'" and "/div", i cannot see the google ad display, only can see the whole box, without any wording on it.

can you help me about it? my blog url is http://xinqing-xinjing.blogspot.com.

thanks!