by Bonnie Calhoun

This is the third in the series of Adsense posts. The other two are HERE, and HERE.

Today I'm going to teach you how to wrap Adsense code into a blog post. The first example isn't exactly rocket science so even the most novice of bloggers will be able to accomplish this with ease.

First the glaring question: Why would I want to give myself the heart palpitations that come with messing with the stupid HTML in my template to put in an equally stupid ad?

LOL...the answer to that: Ads placed within blog posts have been tested and proved to give the maximum in CTR (click thru rate). LOL...this means that you make a lot more money than with other locations on your page.

Let's first look at the use of the Adsense Widget.

From your Dashboard, click Layout. It will open on the Page Elements page. Click the Edit link in the Post Box. There is a clickable link in that open Configure box that you can click to put Ads between any number of posts. Read this Blogger Article about Placing Ads between posts.

From here on, it's going to get a little tougher, so the first thing I would recommend is Backing Up Your Template if you already don't have a copy of it saved in a NotePad file on your own computer. When you open the Layout tab, and click Edit HTML it will give you the Backup link...Please USE IT!!!


Okay...you're all backed up...now on to putting Adsense in your posts. Check the Expand Widget Templates box above the Edit window. Search for the following lines:

<data:post.body/>
or
<p><data:post.body/></p>

You will need to Parse Your Adsense Code like I taught you to do in THIS POST. This is how the post section code will look after you add the Parsed Adsense Code and the line to direct the ad to sit left, or right. In this code I have it set for left. To move it to the other side of the post, change the float position to right.

<div class="post-body entry-content">
<div style="float: left;">
<script type="text/javascript"><!--
google_ad_client = "pub-XXXXXXXXXXXXXXXX";
google_ad_width = 468;
google_ad_height = 60;
google_ad_format = "468x60_as";
google_ad_type = "text_image";
google_ad_channel = "";
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<p><data:post.body/></p>

Click the SAVE TEMPLATE button, and you're done!

I've taught you to Parse the HTML of the AdSense code. Now I'm going to give example of placement.

This first tutorial of placement is to put the code in the post below the Post Title and above the post body. This will show the Adsense code in the first post on your blog page, but when when a specific post is opened up on its own page, the code will always show up in that post.

You will notice the placement in the image to the left. I took a picture just in case I had chosen to change my Adsense placement by the time you were reading this post.

You will notice that for this application I chose the small banner, 468 X 60 so that it would take up most of the width of the posting area.

To accomplish this place go Dashboard>>>Layout>>>Edit HTML...click on "Expand widget templates". It is in the right corner at the top of the Edit box.

Scroll down in the template code until you find this line:

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

Below that line insert your parsed HTML for the Adsense code that I taught you how to make in the last post, and hit SAVE!

Always remember to keep a copy of your template safely stored on your own computer in a NotePad file....just in case!

In the next tutorial I will teach you how to wrap the AdSense code in a post!

I am going to teach you to add AdSense code to your posts. Since it can be an overwhelming process, I'm going to break it down into several posts.

This post will teach you how to make the code compatible. To use AdSense code inside a post it is necessary to "escape" the AdSense code. The reason: If you put the code into your template just as it is written when you display the source code for the page, the Google data is invisible...that does not make Google happy and it is a TOS violation of AdSense...and they will pull your account for that!

Adsense does not allow you to alter their code other than "minor" edits. what we are going to do is considered a "minor" edit.

I contacted AdSense with the following question:

Subject: Wrapping Adsense code in blog post
Date: Wed, 18 Apr 2007 09:12:15 -0700


I would like to put the adsense ads inside of a blog post. To make it look EXACTLY like you give it to me (when viewed as a Page source code) it is necessary for a minor alteration. For Blogger to parse the Adsense Code in XML template, the Javascript has to be escaped, using html entities...It looks EXACTLY like you gave it out when viewed by Page source, so is this permissable?

Adsense answered my email with this:

Hi Bonnie,


We do permit minor edits to the AdSense code to place inside the blog posts. Please keep in mind publisher may not alter any portion of the code or manually change the layout of the ads. For instance, publishers may not alter the ad height variable to mask the Ads by Google moniker.


Thanks for your cooperation.


Sincerely,


Sean
The Google AdSense Team

So here is how we are going to parse the HTML to make it compatible and when viewed by using the Page Source code, it will look exactly as given to you by Adsense.

This is an example of a piece of Adsense code as given out by Adsense:

<script type="text/javascript"><!--
google_ad_client = "pub-XXXXXXXXXXXXXXXX";
google_ad_width = 468;
google_ad_height = 60;
google_ad_format = "468x60_as";
google_ad_type = "text_image";
google_ad_channel = "";
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

You are going to change the (<) to (&lt;) and the (>) to (&gt;) and the quote marks ( " ) to (&quot;) They will all be HTML entities. The code will then look like this:

&lt;script type=&quot;text/javascript&quot;&gt;&lt;!--
google_ad_client = "pub-XXXXXXXXXXXXXXXX";
google_ad_width = 468;
google_ad_height = 60;
google_ad_format = "468x60_as&quot;;
google_ad_type = "text_image";
google_ad_channel = "";
//--&gt;
&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;
src=&quot;http://pagead2.googlesyndication.com/pagead/show_ads.js&quot;&gt;
&lt;/script&gt;

The next post will show you how to place this in your template!

In the real estate industry, there are three things that are the most important about a property...location, location, and...location!

1.) So the very first thing that I want you to pay attention to when working to increase your AdSense performance is location! We'll start with the HEAT MAP to the left. The dark spots are the page locations where readers spend the most time looking. Utilize as many of these spots as possible.

2.) Place your ads above the FOLD...in newspaper language, this is the face location, or what you see on the page when it opens. Depending on your screen size it could be a little more or a little less than what you see here. But rule of thumb is that ads below the FOLD are seldom seen or clicked!

3.) As indicated in the HEAT MAP, the left side of the page is a premiere location. Readers are accustomed to seeing the navigational menu on this side of the page, so move your menu to the right side, like I did, and use the left for your ads!

Now the next section of performance enhancement has to do with the Ads themselves.

1.) Use lots of Ads! Google gives you ad allowances per page, utilize all that you can. But you must keep track of what you are using and what methods work best. You can keep track of this by...

2.) Utilizing the CUSTOM CHANNELS. AdSense gives you the ability to put a name tag on each ad that you make. This will help you to find out which ads work best, according to the fonts, colors, size and placement on the page.

A.) Match the FONTS to those on your page, especially if you are wrapping the AdSense in a blog post!
B.) Match the COLORS of your Ads to the colors of your website. Visitors will look at them more, especially BLUE LINKS. Blue links have a higher CTR than other color links because people are just used to clicking on blue links!
C.) Use Large Ads where possible. The Large Rectangle (336x280) is the best performing ad unit.
D.) And get rid of any borders, so your readers eye can wander around the page unimpeded.

So your showing an interest in monetizing your blog. Monetizing???? That means you want to make money with blogging. Hey why not? You spend mindless amounts of time on the internet, you aughta' get something out of it. I'm doing a Monetizing Your Blog series over on my personal blog Bonnie Writes and I am tying all of the posts, both here and there, about making money, together. So check them all out!

You've seen the ads on other sites, heard about the money other people are making, and now you have an interest in AdSense. Its a relatively straight forward program. There are three kinds of ads.

Ads For Content - they display advertisements based on the content of your blog. They can be text and graphics, just text, or just graphics, and they can lay horizontal or vertical. You can have three of these on your blog page.

AdSense For Search - You earn revenue from ads relevant to your visitors search terms when they use web search. You can have two of these on your blog page.

And lastly, Referrals - there are four products and services that you could carry ad boxes for, and each referral turns into money for you. I've got an AdSense one at the bottom of the page. An AdWords on on the top of the right sidebar, and a Firefox one in the middle of the left sidebar. You can have four of these on your blog page.

The best placement for Ads are "above the fold". That area is defined as the area of your blog that a viewer first sees when your page opens up...without scrolling. to place the code in your sidebars, use Page Elements. To place a long bar in your header, see this post: Adding a Page Element to Your Header.

Or you can add a narrower long bar at the top of your posts. See this post: Adding a Page Element Above Your Posts

Okay, they got to you...you know that you can do this. Now, let me add an observation. This is going to be a job, like any other job. It takes work. It takes studying. IT takes learning from other people, so that entails reading other blogs about Monetizing. Several good places to start are:

Problogger. This whole blog is dedicated to Monetizing and has been that way for several years.

John Chow and this particularly compelling article about his last six months of Monetizing.

And then my dear dear friend Paula Neal Mooney!!! This is the gal who turned me onto the money making aspect of blogging. She rocks as a newcomer!

So now that I have you intrigued, at the head of any of my Google ads, click where is says "Ads by Goooogle. That will take you to the page where you can get started.