How to Add AdSense below the Blogger Post Title

For monetizing one’s Blogger blog, the first choice is always Google’s AdSense. Not only that the AdSense provides the best opportunity to increase revenue from your blog it also makes it is for Blogger user’s to apply and implement AdSense in their blog.

AdSense below Blogger post title

To increase the ad revenue you have to find the sweet spot on your blog to get maximum output from the advertisement programs. One of best place to put ads is just below the post title which will increase the Click Through Rate (CTR) and revenue from advertising is place.
In this post we are going to look how to add and AdSense unit just below the post title and before the post body text. You can use the same method to add codes from other ad providers, add a Facebook or Google+ profile box, add an image or add anything for that matter.

Follow the instructions below;

    1. Go to Blogger Dashboard > Template.
    2. Now it’s wise backup your template.
    3. After backing up; Click ‘Edit HTML‘.
    4. Now in the template editor look for this.
      <b:includable id='post' var='post'>
    5. Inside it look for this.
      <div class='post-header-line-1'>

      If you can not find <div class='post-header-line-1'> inside <b:includable id='post' var='post'>.Then look for something like this inside <b:includable id='post' var='post'>.

      <div class='post-body entry-content' ....>
    6. Now paste the following code after <div class='post-header-line-1'> or before <div class='post-body entry-content' ....> in the template.
      <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <div id='pheadads'>
      <!-- your ads code -->
      </div>
      </b:if>
    7. Replace <!-- your ads code --> by your codes from AdSense code or other providers.
    8. Click ‘Save template‘.

That’s it. You have added an AdSense unit just below you post’s title.

AdSense below Post Title in Mobile Views for Blogger Not Showing-Solved

Many find that the added AdSense unit does not show in the mobile views (?m=1) of the Blogger blog. These are the possible solution for that. See which on applies to your situation.

Problem and Solution #1

If you are using a responsive template then you can turn of the mobile template of you blog. You can do this by:

  1. Going to Blogger Dashboard > Template > click the settings button below Mobile.
  2. On the opened box click No. Show desktop template on mobile devices radio button and click save.

Now the ad unit will also appear in the mobile view.

Problem and Solution #2
If you do not use a responsive template and do not want to turn off the mobile template, you may have problem in showing ads below post title in the mobile view of Blogger. But use the following solution with the first set of instruction given in the post at the beginning to remove this problem.

    1. Go to Blogger Dashboard > Template > Click ‘Edit HTML‘.
    2. This time in the template editor look for this.
      <b:includable id='mobile-post' var='post'>
    3. Inside it look for this.
      <div class='post-header-line-1'>

      If you cannot find <div class='post-header-line-1'> inside ><b:includable id='mobile-post' var='post'>.Then look for something like this inside<b:includable id='mobile-post' var='post'>.

      <div class='post-body entry-content' ....>
    4. Now paste the following code after <div class='post-header-line-1'> or before <div class='post-body entry-content' ....> in the template.
      <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <div id='pheadads'>
      <!-- your ads code -->
      </div>
      </b:if>
    5. Replace <!-- your ads code --> by your codes from AdSense code or other providers.
    6. Click ‘Save template‘.

Please note that this above solution used along with the first ads code which will go inside inside <b:includable id='post' var='post'>; which is mentioned at the first set of instructions of the post. Also Remember the solution#2 will work only when you are mobile view is on.

To check if the mobile view is on or not go to Blogger Dashboard > Template > click the settings button below Mobile. And see if the Yes. Show mobile template on mobile devices was clicked and saved.

Positioning AdSense Unit below the Post Title in Blogger

Now let’s try position it better with CSS codes so that it looks good in the template. Add the CSS codes in the Blogger template just before </head>.

If you are using a rectangle or square unit (i.e.. 300 x 250, 250 x 250, 336 x 280) then you should add this CSS code in your blog.

<style>
#pheadads{
float:right;
padding:5px;
}
/* for responsive templates */@media only screen and (max-width: 767px){
#pheadads{
float:none;
padding:5px;
text-align:center;
}
}
</style>

This will make the ads float in the right side of your post body. Change float: right; to float: left; if you want it on the left side of your post body under the post title. Also if you are using a responsive template then you want the ad unit to be aligned in the center on smaller screen. That is why @media only screen and (max-width: 767px) is added. Change (max-width: 767px) according to your blog’s template design.

If you are using a banner or leaderboard units (970 x 90, 468 x 60) then you may want them to be center aligned in the post body. For this you need to add a center tag with given code like this:-

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='pheadads'>
<center>

insert you ads code

</center>
</div>
</b:if>

Now the unit will be center aligned. Replace insert you ads code with AdSense unit code. These positioning tips will work in most blogger templates even the extreme custom ones.

That’s the gist of adding an AdSense Unit just below the Post header or title. Hope you have understood the tips and solutions well. In case you have any question or facing any issue regarding this do put forward them in the comments section. Thank you all and wishing you have a high CTR.