Add Adsense Ads Before, Between And After Posts In Blogger Blog

Hello, Friends. Today I will be showing you a simple way to show Adsense ads, before the first post, between posts (inline) and after posts in homepage, label and archive pages. This way of properly showing AdSense ads helps you earn more while being a law abiding AdSense publisher.

One of the most important parts of blogging is earning. Blogging without earning though not useless is discouraging. Every blogger who gets to work and establish a fully functional site whether, on Blogger, WordPress, Tumblr should be at least appreciated and supported with monthly earnings.

Recommended Adsense Alternative: Alternative Adverts: High Paying CPM/PPC Affiliate Program 2017

If after two years of getting Adsense approval you are still not making money as a blogger then there is something you are not doing right. And I am thinking it is one of the below-listed options

1. Lack of Dedication
2. Copied (not eye catching) articles
3. Improper placement of Ads
4. No traffic

Getting paid as a blogger depends on you, your blog and the traffic you receive on a daily basis which hereby means a blogger getting only 200 views a day is most likely not to earn much. This way of placing your ads will sure help you earn more.

Is it Mobile Friendly?

Yes. Placing Adsense ads at the top, bottom and inline is fully mobile friendly because ads placed are responsive Adsense ads. Aside from pasting AdSense codes in it, you can also paste normal advert banners from other affiliate programs. You can add Adsense, banners and other affiliates together.

Features Of Add Adsense Ads Before, Between And After Posts In Blogger Blog

The following are the major features of adding AdSense in between posts, above posts and after posts in the homepage, archive pages of blogger blogs.

Note: If you are using Blogspot and you got your AdSense via your blog, you can do it automatically by applying the below steps

blogger.com >> Layout >> Edit Blog Post >> And tick the option with "Show Ads Between Posts Learn more".

How To Add Adsense Ads Before, Between And After Posts In Blogger Blog

Step 1 - visit Dashboard

Visit your AdSense dashboard >> create new responsive ad >> paste the code inside a notepad 

Step 2

Follow the below procedures

blogger.com >> Template >> Edit HTML

Step 3 

Click anywhere inside the code box, now Using CTRL + F search for 

</head>

Paste the below CSS codes right above the </head> tag

<style>
 .post span.title-ads{font-size:16px; text-align:left; background:#fff; font-weight:bold; display: block;margin:10px 0}
</style>

Customization - Replace the Following.

Background:#fff - Replace #fff with the code of your choice, could be #000 (black)

font-size:16px - Replace s16px with lower value or higher value if you wish to make the font bigger or smaller.

text-align: left - Replace left with either right or center to place it either at the right or center.

Step 4

Still, in the code box, search for the below code using CTRL + F

<b:includable id='main' var='top'>

After searching, you should see a line of codes similar to the below codes.

<b:includable id='main' var='top'>
  <b:if cond='!data:mobile'>
    <!-- posts -->
    <div class='blog-posts hfeed'>
      <b:include data='top' name='status-message'/>
      <b:loop values='data:posts' var='post'>
        <b:if cond='data:post.isDateStart and not data:post.isFirstPost'>
          &lt;/div&gt;&lt;/div&gt;
        </b:if>
        <b:if cond='data:post.isDateStart'>
          &lt;div class=&quot;date-outer&quot;&gt;
        </b:if>
        <b:if cond='data:post.dateHeader'>
          <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
        </b:if>
        <b:if cond='data:post.isDateStart'>
          &lt;div class=&quot;date-posts&quot;&gt;
        </b:if>
        <div class='post-outer'>
          <b:include data='post' name='post'/>
          <b:include cond='data:blog.pageType in {&quot;static_page&quot;,&quot;item&quot;}' data='post' name='comment_picker'/>
        </div>
        <!-- Ad -->
        <b:if cond='data:post.includeAd'>
          <div class='inline-ad'>
            <data:adCode/>
          </div>
        </b:if>
      </b:loop>
      <b:if cond='data:numPosts != 0'>
        &lt;/div&gt;&lt;/div&gt;
      </b:if>
    </div>
    <!-- navigation -->
    <b:include name='nextprev'/>
    <!-- feed links -->
    <b:include name='feedLinks'/>
  <b:else/>
    <b:include name='mobile-main'/>
  </b:if>
  <b:if cond='data:top.showPlusOne'>
    <data:top.googlePlusBootstrap/>
  </b:if>
</b:includable>

In case you don"t find it at once, you should probably see something like the code below

<b:includable id='main' var='top'>...</b:includable>

No matter which of them you find. Just replace it with the code below.

Replace any of the above codes with the below code. Make sure you replace everything or else you will be facing some HTML error on your code box.

              <b:includable id='main' var='top'>
  <b:if cond='!data:mobile'>
    <!-- posts -->
    <div class='blog-posts hfeed'>
      <b:include data='top' name='status-message'/>
<b:if cond='data:blog.pageType != &quot;static_page&quot; and data:blog.pageType != &quot;item&quot;'>
<div class='post'>
<span class='title-ads'>Ads Spot</span>
PASTE ADS CODE HERE
</div>
</b:if>
      <data:defaultAdStart/>
      <b:loop values='data:posts' var='post' index='x'>
        <b:if cond='data:post.isDateStart and not data:post.isFirstPost'>
          &lt;/div&gt;&lt;/div&gt;
        </b:if>
        <b:if cond='data:post.isDateStart'>
          &lt;div class=&quot;date-outer&quot;&gt;
        </b:if>
        <b:if cond='data:post.dateHeader'>
          <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
        </b:if>
        <b:if cond='data:post.isDateStart'>
          &lt;div class=&quot;date-posts&quot;&gt;
        </b:if>
        <div class='post-outer'>
          <b:include data='post' name='post'/>
          <b:include cond='data:blog.pageType in {&quot;static_page&quot;,&quot;item&quot;}' data='post' name='comment_picker'/>
        </div>
<b:if cond='data:blog.pageType != &quot;static_page&quot; and data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:x==1'>
<div class='post'>
<span class='title-ads'>Ads Spot</span>
PASTE ADS CODE HERE
</div>
</b:if>
<b:if cond='data:x==3'>
<div class='post'>
<span class='title-ads'>Ads Spot</span>
PASTE ADS CODE HERE
</div>
</b:if>
</b:if>
        <b:if cond='data:post.includeAd'>
          <b:if cond='data:post.isFirstPost'>
            <data:defaultAdEnd/>
          <b:else/>
            <data:adEnd/>
          </b:if>
          <div class='inline-ad'>
            <data:adCode/>
          </div>
          <data:adStart/>
        </b:if>
      </b:loop>
      <b:if cond='data:numPosts != 0'>
        &lt;/div&gt;&lt;/div&gt;
      </b:if>
      <data:adEnd/>
<b:if cond='data:blog.pageType != &quot;static_page&quot; and data:blog.pageType != &quot;item&quot;'>
<div class='post'>
<span class='title-ads'>Ads Spot</span>
PASTE ADS CODE HERE
</div>
</b:if>
    </div>
    <!-- navigation -->
    <b:include name='nextprev'/>
    <!-- feed links -->
    <b:include name='feedLinks'/>
  <b:else/>
    <b:include name='mobile-main'/>
  </b:if>
  <b:if cond='data:top.showDummy'>
    <data:top.dummyBootstrap/>
  </b:if>
</b:includable>

Customization.

Replace "PASTE ADS CODE HERE" with the responsive Adsense code you copied earlier. Replace all the "PASTE ADS CODE HERE" with any code of your choice. It could be a banner you created or an affiliate code from Adsense, Amazon, AlternativeAds, Jumia and any other program.

Recommended: To Add Adsense Inside Post, "Read this Post - Properly Show Adsense Ads Anywhere In Blogger Blog"

Final Words

Hopefully, I have been able to show you ways to display Adsense ads on your blogger blog and begin to earn more. Add Adsense above, in between and below blogger posts in homepage and archive page. I have already shown you ways to show Adsense properly inside posts.