Blogspot How to: Add Adsense Below Post Titles

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 to http://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:
  11.     <div class='post-body entry-content'>
    <data:post.body/>
    <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>
  12. Paste the converted ad code just before the above code. The result would look something like this:
  13. <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>
  14. 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.
  15. 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>

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.

18 comments:

  1. thank uuu.. this is the best tutorial I found over the web

    ReplyDelete
  2. Ya thanks a lot, its the best one...

    ReplyDelete
  3. You are the best,,,,honestly...i love u

    ReplyDelete
  4. HELP...is it required that I must enable ads betwwen post in blogger before i can do this.

    ReplyDelete
  5. Can I use just one adcode generated from my adsense a/c on several websites?

    ReplyDelete
  6. This post is very helpful, thanks you very much !

    ReplyDelete
  7. hi...iike yr post very much..but i hav a confusion abt parsing the adsense code. Is it against the google adsense TOS. n one more thing this is important R u using parsed adsense code in yr blog..thnx

    ReplyDelete
  8. @ Anonymous, I'm not sure what you're saying but if you're referring to changing the code to embed it in Blogger's HTML then it is fine in my opinion.

    ReplyDelete
  9. rocking one now my adsence is working , this stuff was awesome

    ReplyDelete
  10. this was very helpful, was having some trouble before but i got through with it man and now i have ads display before the within the posts.Great share and continue the good work

    ReplyDelete
  11. Hi i tried but i failed..:(
    You have given the example of above code which is not converted..Should i paste the non converted code??

    ReplyDelete
    Replies
    1. Hi Mashtec, you'd have to paste the converted code otherwise Blogger won't accept it.

      Delete
  12. Wow i did it lastly finally with your tips. I tried many times earlier but no proper guiding from other helping blogs. Thanks a lots. My blogs loog great with ur help.

    http://govengineers.blogspot.in/

    http://governmentjobsforum.blogspot.in/

    ReplyDelete
  13. Replies
    1. Hi Andras, I'm no longer accepting any new requests. However, you can get premium support starting from $10.

      Delete
  14. yes, it helps and I loved it along with screeshot

    ReplyDelete

Note: All comments will be moderated.