How to display Google Adsense after the featured post or first post on Blogger new theme 2017?

adsense-after-featured-first-post-blogger-new-theme

Google introduced new themes for Blogger in 2017 and if you have applied those to your blog, great! In this post, we shall see how to display Google Adsense after the featured post or first post on Blogger new theme 2017. Not just Adsense, we can add and display anything else.


Google Adsense can be displayed auto in Blogger by settings up Google Adsense and option to show ads on the blog to let Blogger decide where it's best to display the ads. However, many would like to control the display the where they want. When we choose to let Blogger decide the display by choosing to display ads on the blog, Adsense can also be displayed in between posts on the home page. This can be enabled from LAYOUT > Edit BLOG POSTS widget > Check "Show Ad Between Posts" > Save.
blogger-show-ads-between-posts


But if you are managing the display of Adsense in the Blogger blog yourself, then Adsense can be placed in many places but placing Adsense in between posts may be difficult. In which case, we may display Adsense at least after the first post. If you intend to apply the same, read on.

See here for older themes:
How to show Google Adsense after the first post on Blogger home page (mobile and desktop)?

For the new Blogger Themes (2017) do the following:
  • Copy the code from Google Adsense you wish to add to the blog
  • Go to Blogger > LAYOUT > Add a gadget > Select HTML/JavaScript > and paste the code > save it
  • Save Arrangement
  • Move the widget under "Featured Post"
google-adsense-under-featured-post-new-blogger-theme

That will make the Google Adsense appear under Featured Post.

But wait!
When we test, it does appear under Featured post. But then it also appears under static post pages also. And it is messing up the post title and the featured image of the individual post.

So, now we have to apply some Blogger conditions so that the newly added Adsense appears only on the Blogger homepage. Check previous post for - Some Common Useful Blogger conditional statements.

  • Go to Blogger Dashboard > Theme > EDIT HTML
  • Click "Jump to Widget"
  • Click on the widget that is right below a widget with name like "FeaturedPost" as that is under which we added the widget in the LAYOUT
blogger-edit-html-widget-adsense

  • On clicking the widget, it will take us to the code of that widget
  • If the widget code is not fully expanded, expand it but click the little arrow heads on the left where line numbers are displayed.
  • Locate "<div class='widget-content'>" for that particular widget
  • And right before the "<div class='widget-content'>" add a Blogger IF condition to check if HomePage as shown below in bold.
 <b:if cond='data:blog.url == data:blog.homepageUrl'>
          <div class='widget-content'>
               <data:content/>
          </div>
</b:if>

In the above code, the condition " <b:if cond='data:blog.url == data:blog.homepageUrl'>" checks if the current URL of the blog is the HomePage URL. If it is then the contents of the widget we added are rendered otherwise not.

  • Save Theme
You can how test if the Google Adsense is displaying only on the home page on the new Blogger theme (2017).


adsense-after-featured-first-post-blogger-new-theme

In older Blogger themes, we had to add code separately for mobile and desktop. But that is not required in the new Blogger themes. It applied to both desktop and mobile.



Comment with Facebook

Comments