Add Google Adsense to your Blogger Posts

Posted 3/19/08 - Kellex

The placement of Google Adsense ads will remain a topic of conversation for quite some time. Many recommend that you place them either at the beginning of your post or at the end, right before the footer. These two placements in theory will generate the most clicks as long as Google is updating them and matching your content with its advertisement database.

Our basketball blog utilizes the end of post theory and we have seen some dramatic results. Of course some will say that ads take a way from your blog’s content and in turn will cause you to lose viewers. I find that completely absurd and have seen no dip in traffic in my blog whether I included ads or not. Don’t believe everything you read!

You have 2 options when adding Adsense to your posts:


Built in Blogger Option:

The first is the easiest and is provided to you through your blogger “LAYOUT” section.

If you click “EDIT” on your “BLOG POSTS” section, there should be an option to “SHOW ADS BETWEEN POSTS.” If you check the box it will give you options for Adsense by allowing you to enter your Adsense account information and customize the ads so that they blend in well to your content.

Try this option and see how you like it. I personalize prefer option 2 as you have a little more control over the ads and can customize them to your liking.



Custom Adsense Ads Option:

Login to your Google Adsense account.

Go to AdSense Setup -> Products and choose “AdSense for Content”.

Next, select “Ad unit” and follow their instructions on picking the size of ad, color combination, and so on, right till the end when they automatically generate a HTML code for you. Copy this code and paste it into Microsoft Notepad. (If you are a WinXP user, click the Start button at the bottom left corner of your screen. Under All Programs -> Accessories, you should see the MS Notepad icon.)

You will now need to modify your Adsense code slightly for Blogger to accept it. (This is not against Google’s policies, do not worry.)

In Notepad, run a CTRL+H to pull up the REPLACE query. You will now want to replace:


< with &lt;
> with &gt;
“ with &quot;

Once you have replaced those characters, your code will look similar to this:


&lt;script type=&quot;text/javascript&quot;&gt;&lt;!--
google_ad_client = &quot;pub-0000000000000000&quot;;
google_ad_width = 336;
google_ad_height = 280;
google_ad_format = &quot;336x280_as&amp;amp;quot;;
google_ad_type = &quot;text&quot;;
google_ad_channel = &quot;&quot;;
google_color_border = &quot;FFFFFF&quot;;
google_color_bg = &quot;FFFFFF&quot;;
google_color_link = &quot;000000&quot;;
google_color_text = &quot;000000&quot;;
google_color_url = &quot;000000&quot;;
//--&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;
src=&quot;http://pagead2.googlesyndication.com/pagead/show_ads.js">
&lt;/script&gt;


The next step is to insert this code into your template in your location choice. We will show you how to add it to the bottom of your post but you can easily move it to another location if you choose to.

Login to Blogger’s Dashboard and go to “LAYOUT”, then “EDIT HTML”, and check the box to “EXPAND WIDGET TEMPLATES.”

Now search for post.body through your browser's search function (Ctrl+F). You should see these lines:


<div class='post-body'>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>


If you would like your Adsense ad to appear just below your post, add the following code below the blue lines.


<div style='float:left;'>
AdSense Code
</div>


The “Adsense Code” will be the code you have formatted in that original notepad file. Click “Preview” to see if the location works for you.

You’ll notice the ‘float:left’ code which can be modified with ‘float:right’ if you would rather have the ad on the right side.

If this location works for you, go ahead and click save and your blog is ready to go!