The CTR (click-through rate) and CPC (cost per click) of the ads are quite high at the end of the post. You can place any kind of ad unit you want such text/display ads, link ad unit, and matched content also.
Unlike WordPress, Blogger doesn’t have any plugins support which can help you to add AdSense ad code at the end of the post, so you have to add it manually in your Blogger template. This tutorial will guide you how to do this.
Note: In our previous article, we have already discussed how to add AdSense ads below post title in your Blogger website/blog. Make sure to check out that tutorial also.
Table of Contents
Which ad units & sizes you can place at the end of the post?
Google AdSense has a number of ad units and ad sizes available. Here we have discussed which ad units and ad sizes will perform well at the end of the post in Blogger –
- 336×280 ad size – We recommend you to use 336×280 ad size (also known as large rectangle). It will perform well on both desktop and mobile devices.
- Responsive ads – Responsive ads will automatically adjust their size according to the available space. They are mobile-friendly also.
- 728×90 ad size – You can also use 728×90 (also known as leaderboard) ad size at the end of the post, however, it may not perform good as the height of the ad is quite small.
- Link ad units – Along with text/display ads, you can also place link ad units at the end of the post on your Blogger website. Link ads also have various ad sizes, we recommend you to use responsive link ads.
- Matched content ads – If your site is eligible for matched content ads, you can add them at the end of the post. Matched content is a type of recommendation tool which will show related posts from your blog along with the ads.
After selecting the ad size/unit as per your needs, login to your Google AdSense account and create a new ad unit. Once you have created it, copy its ad code.
Encode AdSense ad code for Blogger template
You can’t place AdSense ad code in Blogger template directly. Blogger template doesn’t support certain special characters such as greater than (>), less than (<), ampersand (&), and double quote symbol (“).
You have to encode your AdSense ad code from HTML to XML coding. For this, you can use our online HTML to XML parser tool. Simply, go to this webpage and paste your AdSense ad code. After this, copy the parsed code and then it’s ready to be added in your Blogger template.
Add AdSense ads at the end of the post in Blogger
Follow this step-by-step guide to add AdSense ads at the end of the post on your Blogger website –
- Login to your Blogger account and open your blog dashboard.
- Now go to Template > Edit Theme.
- Click anywhere in the template editor and press CTRL+F shortcut key to open the search box.
- Search the following code in your Blogger template –
- Just below <div class=”post-footer”>, paste this code:
<b:if cond='data:blog.pageType == "item"'> <div style='clear: both; text-align: center; margin: 10px;'> <!--your AdSense code here--> </div></b:if>
Make sure to replace <!–your AdSense code here–> with the parsed AdSense ad code that you have generated from the HTML to XML parser tool.
We have used Blogger conditional tags in the above code so that AdSense ads will appear on your posts only (index pages). We have also aligned AdSense ads in the center and added margin space around AdSense ads using CSS text-align and margin properties in the style tag of the <div> container.
Note: There may be more than one occurrence of <div class=”post-footer”> code in your Blogger template (for desktop and mobile version). If the ads don’t work, try with other occurrences of the code.
- Finally, tap the “Save theme” button. That’s it.
<div class="post-footer">
Now go to your Blogger website and check if the ads are working properly.
We hope you find this guide helpful to add AdSense ads at the end of the post on your Blogger website/blog. If you are facing any problem, feel free to share it in the comment section.