How to Display Ads in Blog Post

How to Display Ads in Blog Post

In this article, I want to share a method that is used to modify HTML template in order to display ads in blog post. This guide is useful for blog that used Blogger or Blogspot as the platform. For WordPress blog, you don't have to worried because there are lot of plugins you can use for this purpose for example EasyAdsense.

So how to display ads in blog post using Blogger?  Here is an example of post in one of my blog,

There are two locations that are going to get most click when you displaying ads on your blog. One is at the beginning of the article (content body) and one at the end of the article. In order to place the ads at this locations, you need to add your ads code within the HTML template. Just follow the step below. Before you begin, please do a backup to your blog template as safety precautions.

Step 1:
Log in to your blogger dashboard and navigate to Template, Click on Edit HTML

Step 2:
Find the post location, press CTRL + F on the HTML editor, a search box will appear on top right of the code editor, and paste this code "<b:includable id='post' var='post'>" and hit enter on your keyboard.

Step 3:
After you find the post location, scroll down and look for "<div class='post-header-line-1'/>". This code indicate your title post and your ads code will be place just after that code, or you can try and error until you find the right position by placing your ads code here. In my case, I placed the ads code on the green area.

Please REMEMBER! If this editor only accept HTML codes, most of the time, your ads code is in JavaScript, so please convert it to HTML before you place it here. I always used this site to convert my ads code, eBlog Template.

Step 4:
Now you need to find second position, that is just after the end of your article. Find the following codes, it is just after the previous codes. So, just scroll down slowly.

Step 5:
Save and preview your blog post.

Find out how to display ads in blog post for mobile