Add AdSense below First Post of Blogger Label Pages

One of the sweet spot for adding AdSense unit to your Blogger blog is just below the first post in the index (i.e.. label, search) pages of your blog. It is a sweet spot because; visitors definitely see this but it does not annoy the visitor and also creates no problem is viewing rest of the posts below. Not to mention that this place generates a good Click Through Rate (CTR).

However; adding an AdSense Unit just below the first post in the index pages in not easy as it sounds. Almost every Blogger user is now using customized beautiful templates in their blogs simple to meet the demand for both desktop and mobile. And because not only the design also the templates structure is different from designer to designer.

Despite that; in this post you will find simple solutions to show AdSense unit or other staff (ads from other providers, images, etc.) below the first post in the index pages which will work in both mobile and desktop.

To show AdSense unit or other elements just below the first post in the index page of Blogger; follow the instructions below;

adsense below first post of blogger label pages

  1. Go to Blogger Dashboard > Template.
  2. After backing up the template, click ‘Edit HTML‘.
  3. Now Look for this;
    <b:include data='post' name='post'/>
  4. Just below this line add the following code.
    <b:if cond='data:blog.pageType == "index"'>
    <b:if cond='data:post.isFirstPost'>
    <div id='ads1stpost'>
    <center>
    <!-- AdSense ad Code Here -->
    </center>
    </div>
    </b:if>
    </b:if>

    Here;

    • <div id='ads1stpost'> is used for positioning purposes using CSS code which is helpful in a responsive template.
    • <center> is for aligning/floating the unit in the center middle and you can use <left> or <right>.
    • You can delete the <div> and <center> if you require.
    • <b:if cond='data:post.isFirstPost'> is must. This conditional tag targets the first post in index pages and working only on index pages. Also there is now tags like this for second, third or final post.
    • <!-- AdSense ad Code Here --> with you AdSense code or codes other elements.
    • <b:if cond='data:blog.pageType == "index"'> conditional tag is added to make sure it loads in the index pages. Many have reported that; their ad below the first post is also showing in post pages. This will remove the problem.
  5. Click ‘Save template‘ in the template editor.

Check it out in the blog for both in the desktop and mobile (?m=1). That’s it. You have followed the instructions perfectly and they have worked. This should meet your desire of showing ads below the first post in index pages.

AdSense Ads below First Post not Showing in the Blogger Mobile Views (?m=1)

This will not happen if you are using a responsive template and plus your blog’s separate mobile template is off from the template setting.

This will only happen if you are using a different template for mobile version of your blog; even if the name is same. For example; if you use default blogger template ‘Simple’ for both desktop and mobile, the ads will no show in the mobile version. It’s because the mobile version is different from your edited desktop version of the ‘Simple’ template. Not just ads in below the first post of index pages; other directly added AdSense ad units will not load in that situation.

So to solve this you can do these.

(A) Simply you can use a responsive-mobile friendly template and plus turn of separate mobile template.

If you do not want to turn of the separate mobile template version then;

(B) You can follow the instructions below;

    1. Go to Blogger dashboard > Template.
    2. Click the settings button under ‘Mobile‘ > select “Yes. Show mobile template on mobile devices“.
    3. After that select ‘Custom‘ from the drop-down menu below the ‘Choose mobile template‘.
    4. And click ‘Save‘. This means that your mobile template will adopt some settings like; widgets/gadgets, ad units, navigation, search box from you desktop template.
    5. Now; click ‘Edit HTML‘ in Blogger dashboard > Template.
    6. Now use (i) or (ii);
      1. In the template editor search for;
        <b:include data='post' name='mobile-index-post'/>

        If you found this more than once in the template; use one which is inside the <b:includable id='mobile-main' var='top'>.

        Just below it paste you AdSense codes. (See step 7)

      2. Look for;
        <b:includable id='mobile-index-post' var='post'>
        
        ......
        
        </b:includable>

        There will be other codes in side it and do not edit them. Just before closing <b:includable id='mobile-index-post' var='post'> with </b:includable> you have to paste the AdSense code. Means ad the AdSense code after everything else in the <b:includable id='mobile-index-post' var='post'>. (See step 7)

    7. Use the code from Adsense and put inside the following code then use it in the template.
      <b:if cond='data:blog.pageType == "index"'>
      <b:if cond='data:post.isFirstPost'>
      <div id='ads1stpost'>
      <center>
      <!-- AdSense ad Code Here -->
      </center>
      </div>
      </b:if>
      </b:if>
    8. Save you template and check out them in your mobile versions of your blog.

Alright, you have added the ads in the desktop and mobile view successfully.

If your template customized to show the posts in the index pages in gallery style or metro style then you will have problem in position the AdSense unit. In these cases; most bloggers do not use AdSense units as it may generate spam or false clicks in the ads.

However if you really want to add one and you know what you are doing; then use AdSense codes inside a <div> tag (like; <div id='ads1stpost'>) and the id or class of it to position the ad in the right place with CSS.

This post covers all there is to know and do for adding advertisement below the first post in index pages of blogger blogs. If you require any further assistance then you know you can ask using the comments section. Gunning for a better CTR and more revenue from your blog.