Create Ads Slots Before and After Posts

Create Ads Slots Before and After Posts - Actually the method is very easy, but for those of you who already know how to do it, you don't need to follow this method anymore because you have done this method before.

But, if you want to display ads, either banner ads or special AdSense ad units such as In-article Ads in the post, you can follow the tips I shared, about How to Create Ads Slots Before and After Posts. For more details, how to do it, you can immediately see the following steps.

How to Create Ads Slots Before and After Posts

First open the Blogger dashboard >> click the Themes menu and Edit HTML.

Then look for this code in the template

<data:post.body/>

Or

<p><data:post.body/></p>

More precisely, look for the code <data:post.body/> inside this markup

<b:includable id='post' var='post'>
....
....
<data:post.body/>....
....
</b:includable>

If in the template you have some code <data:post.body/> find the code that is wrapped with the conditional tag post page. Examples like this

<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
</b:if>

It can also be replaced with the Latest Blogger Conditional Tag format

If it's not there, you only need to add a new code like this

<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
</b:if>

Next add the code below to wrap the banner or ad code

<b:if cond='data:blog.pageType == "item"'>
<div class=khalista.blog'>
<!-- Your Ad Here --></div>
<data:post.body/>
<div class='khalista'>
<!-- Your Ad Here --></div>
</b:if>

Change the code marked with your banner or ad code. For example like this, here I use the AdSense In-article code.

<b:if cond='data:blog.pageType == "item"'>
<div class=khalista.blog'>
<ins class='adsbygoogle' data-ad-client='ca-pub-xxxxxxxxxxxxx' data-ad-format='fluid' data-ad-layout='in-article' data-ad-slot='xxxxxxx' style='display:block; text-align:center;'/><script>(adsbygoogle = window.adsbygoogle || []).push({});         </script></div>
<data:post.body/>
<div class='khalista'>
<ins class='adsbygoogle' data-ad-client='ca-pub-xxxxxxxxxxxxx' data-ad-format='fluid' data-ad-layout='in-article' data-ad-slot='xxxxxxx' style='display:block; text-align:center;'/><script>(adsbygoogle = window.adsbygoogle || []).push({});         </script></div>
</b:if>

Also add the CSS code below before </head> or &lt;/head&gt;&lt;!--<head/>--&gt;

<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
.khalista{margin:20px auto 0 auto}
.khalista.blog{margin:20px auto}
</style>
</b:if>

Finish, click the Save theme button in the template editor.

Thus our tips about How to Make Ad Slots Before and After Fill in Posts on Blogger. Hopefully useful and good luck.

Share :