Wednesday, October 5, 2011

Blogspot How to: Add Adsense Below Post Titles

13 comments

How to Add Adsense Below Post Titles in Blogspot Blogs

Google Adsense is the most popular ad network on the planet. A lot of Blogger users also use it. It's an endless discussion where to place these ads on your blog for maximum exposure. The best ad places are around the header or above the posts or below the post titles. You can easily add adsense in your sidebar as a gadget. But Blogger doesn't allows us to directly place the ads below post titles. The ads below post titles have proven to be one of the most successful money making positions. So, what are you waiting for? Follow this tutorial to add your Adsense ads below post titles.

Please Note: I'm assuming that you're using the new Adsense interface.

Steps!

  1. Log in to your Google Adsense account by going to https://www.google.com/adsense/
  2. Go to My ads tab and open Ad units from the left side by expanding Content link.[View Screenshot for Help]
  3. Click new ad unit to create a new ad.[View Screenshot for Help]
  4. Select the size, type and color of your ad. For best results chose either 300x250 medium or 336x250 large rectangle.[View Screenshot for Help]
  5. Give your ad a remember-able name and ad a custom channel to track the ad performance. If you don't know anything about channels then leave that option.
  6. After filling required information, click save and get code button at the bottom of the page.[View Screenshot for Help]
  7. A pop-up window will appear with the ad code. Copy that code.[View Screenshot for Help]
  8. Before pasting the ad code in Blogger, we must make it compatible with Blogger format. So go tohttp://www.hacktrix.com/adsense-code-converter/ paste the ad code and convert it. You'll find the converted ad code in the bottom box there. Copy the converted ad code.
  9. Open your Blogger account and go to Design then Edit HTML tab and check Expand Widget Templates option.
  10. Press Ctrl + f & find <data:post.body/> you'll see some code like this:
    <div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
  1. Paste the converted ad code just before the above code. The result would look something like this:
<script type="text/javascript"><!--
google_ad_client = "ca-pub-xxxxxxxxxxxxxxx";
/* my ads */
google_ad_slot = "xxxxxxxxxx";
google_ad_width = 300;
google_ad_height = 250;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
  1. Click the PREVIEW button to see the result. Thought you might not see ads below post titles instantly because sometimes Adsense ads take some time to display.
  2. After that save your template by clicking the SAVE TEMPLATE button.

Tip: Make Ads Appear Only on Post Pages


Usually, users don't like to see too many ads on a single page. So, we can hide the ads under post titles on main page. These ads will appear only when users will click the post title and go to the post page. To do that follow the steps above but after step 8 you have the converted ad code. Ad some more code in that converted code so that it should look like this:

<b:if cond='data:blog.pageType == &quot;item&quot;'><script type="text/javascript"><!--
google_ad_client = "ca-pub-xxxxxxxxxxxxxxx";
/* my ads */
google_ad_slot = "xxxxxxxxxx";
google_ad_width = 300;
google_ad_height = 250;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></b:if>


1.) If you want to show your Google Adsense ad below post tile to blogger in the left side then copy the below Code 1.1,
Code 1.1

<div style="float: left; margin: 10px 10px 10px 0;">
YOUR ADSENSE CODE HERE
</div>
 OR

2.) If you want to show your Google Adsense ad below post tile to blogger in the right side then copy the below Code 1.2,

Code 1.2

<div style="float: right; margin: 10px 0px 10px 10px;">
YOUR ADSENSE CODE HERE
</div>
OR

3.) If you want to show your Google Adsense ad below post tile to blogger in the center then copy the below Code 1.3,

Code 1.3

<div style="text-align: center; margin: 10px 10px 10px 0;">
YOUR ADSENSE CODE HERE
</div>

What I did here is that I've added an if condition to make the ads appear only on post pages. After that, follow the steps above to complete the tutorial.

How To Place Adsense Below Post Title

2 comments


Why below post title? Because it is the position with the highest CTR (click-through rate). In other words the ad placed there will bring the most money.
According to the Adsense ads positioning guideline published by Google, the best performing Adsense ad position is above the primary content i.e. above the blog post. This is illustrated by the heat map on the right.
Placing an ad below post title (above post content) is a not at all difficult. All you have to do is create an ad unit on Google Adsense website, get the code and add it to the specified location in your blog template.
(You can’t use Blogger’s Inline Adsense or Adsense gadget because it doesn’t have the option to add an ad under post title).
Here we go,

1. Preparing Adsense ad code

  1. Log in to Google Adsense (opens in  tab/window) to create a new ad unit.
  2. For best results choose wide ad size -either 300x250 Medium Rectangle or 336x250 Large Rectangle format. Make sure you assign a new ad channel to it for performance monitoring purposes.
  3. When the setup is complete, you will be given a code.
  4. Run the code through an HTML escape tool to escape special characters in the code. The ad won’t appear if you use the original unescaped ad code.
  5. Copy the escaped code.

2. Adding ad code to the template

  1. Go to Dashboard > Design > Edit HTML.
  2. Tick the  Expand Widget Templates check box on top right of the HTML window.
  3. Look for the following line in your HTML code:
    <data:post.body/> 
  4. Paste the escaped ad code right above the line, like so:
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
     PLACE AD CODE HERE
    </b:if>

    the conditional tag in lines 1 and 3 will make the ad appear only on post pages. If you want the ad to appear on all pages, just remove the lines.
  5. Save and view your blog.

3. Monitor ad performance

Make sure you monitor the ad performance. Don’t automatically assume it succeeds in increasing CTR without seeing the actual results.
No two blogs are the same, what works on most blogs may or may not work on yours. If you don’t see positive changes, test again with different ad types, formats, colors and/or placements.
Enjoy!

Followers

Blogumulus by Roy Tanck and Amanda Fazani
Free Blogger Tips, Hacks, Widgets, Templates and more