How to Add AdSense on Blogger Post Footer

For any blogger, the post footer is one of the favorite places to put an ad AdSense unit. Post footer is one of the hot zones in any normal blog or website to get a high increase the Click Through Rate (CTR).

For Blogger blogs, you have to edit the template to add and show AdSense ad unit or anything else in or before the post footer.

Blogger allows you to add AdSense units of any size through creating a widget directly from the Blogger dashboard. But the problem is that it does not give you to freedom to add them in the strategic places like before or in the post footer, below the post header or title properly.
Also, you do not get the freedom to set and position them to your liking. Adding AdSense in or before post footer, below the post title, are the places where you will get high CTR and that will result in more revenue.
In this post, you will learn how to add an AdSense unit in the post footer of any Blogger blog. Also know about few problems you might have in loading the ad units, especially in mobile views of blogger blogs and 100% working solutions for it.
Follow the instructions below. You can Also use the same method to add another thing in the post footer like; ads from other ad providers, add a Facebook or Google+ profile box, add an image or add anything for that matter.

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 any one of these codes inside<b:includable id='post' var='post'>and choose any one of the codes from the following table.
   CodesAccording to you blog’s need and design, you can add the AdSense code for ad unit before, inside or after anyone of the above codes.
6. Choose the code and paste the following code inside, before or after your selected code in the template.

   <b:if cond='data:blog.pageType == &quot;item&quot;'>
   <div id='pfootads'>
   <!-- your ads code -->
   </div>
   </b:if>

7. Replace insert you ads code by your codes from AdSense code or other providers.
8. Click ‘Save template‘.

That’s it, you have added an AdSense unit in the post footer of your Blogger blog. You should try different combination to get the placement of the ad unit exactly right.

AdSense in Post Footer is not Loading in Mobile Views of Blogger Blog

The above instructions will work fine for your blog. But few Blogger users find out that their AdSense ad units are loading in the mobile view (?m=1) of the blog.But no worries; I am giving you an easy and proper solution for it. See which problem and 100% working solution applies to your situation.
But no worries; I am giving you an easy and proper solution for it. See which problem and 100% working solution applies to your situation.
Problem and Solution #1
If you are using a responsive template then you can turn off the mobile template of your 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 a problem in showing ads below post title in the mobile view of Blogger.
For checking if the mobile view is on or not; go to Going 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.
Follow these instructions below with the first set of instruction given in the post to remove this problem.

1. Go to Blogger Dashboard > Template > Click ‘Edit HTML‘. Do not forget to back-up the template.
2. This time in the template editor look for this.

   <b:includable id='mobile-post' var='post'>

3. Select your position and placement of the AdSense ads unit from the above table given in the step-5 of the first set instructions.
4. Choose the code and paste the following code inside, before or after your selected code in the template.

   <b:if cond='data:blog.pageType == &quot;item&quot;'>
   <div id='pfootads'>
   <!-- your ads code -->
   </div>
   </b:if>

5. Replace <!-- your ads code -->by your codes from AdSense or other providers.
6. Click ‘Save template‘.

As you see that not only the second solution shows the ads in the mobile view; it also give you an opportunity to use a different size ad unit to match the small sized screens and your mobile template.
Remember that second solution is used along with the first ads code which will go inside <b:includable id='post' var='post'>. Also, remember the solution#2 will work only when you are mobile view is on.
Now if following the first six steps didn’t help your cause, then you need to make the desktop and mobile template exactly same for your blog.
For doing that; go to Blogger dashboard > Template > click the settings button under ‘Mobile’ > select “Yes. Show mobile template on mobile devices” > select ‘Custom’ from the drop-down menu below the ‘Choose mobile template’ > click ‘save’.

Positioning AdSense Unit in the Post footer in Blogger

Now let’s see few way to position the AdSense ad units better with CSS codes so that it looks good in the template. Add CSS codes in your template just before.</head> You should position the AdSense ads unit according to your blog’s design and layout with CSS and/or HTML codes. The following codes are just suggestion on how you can do that,
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>
#pfootads{
float:left;
padding:5px;
}
/* for responsive templates */@media only screen and (max-width: 767px){
#pfootads{
float:none;
padding:5px;
text-align:center;
}
}</style>

This will make the ads float in the right side of your post body. In the above code, the ad unit will be shown on the left side of the post footer. Change float: left; to float: right; if you want it on the left side of your post body under the post title.
If you want it to be center aligned then replace the float: left from the above code with text-align: center;.
Also if you are using a responsive template then you want the ad unit to be aligned in the center on the 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 the AdSense unit before <div class='post-footer'> and want it aligned in the center then avoid then float property in the CSS code.
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='pfootads'>
<center>

insert you ads code

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

Now the unit will be center aligned. Replace insert you add code with AdSense unit code. These positioning tips will work in most blogger templates even the extreme custom ones.
Do try out several combinations using HTML, CSS, the codes from the table and different sizes of AdSense ad units; until the ad units look fine in your template which visitors have no difficulty will see.
Hope this helped you in your monetizing my Blogger blog mission. If you have any question or facing any issue regarding this do mention them in the comments section. Wishing a high CTR for your blog.