Google introduced new themes for Blogger in 2017 and if you have applied those to your blog, great! Congratulations! 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 if desired.
As we know already, we can let Blogger display Google Adsense too by settings up Google Adsense and opting to show ads on the blog to let Blogger decide to display ads in designated areas. We can also show ads between posts in the home page post feed. This can be enabled from LAYOUT > Edit BLOG POSTS widget > Check "Show Ad Between Posts" > Save.
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 /feed on the home page. However, the auto ad positioning may be what you desire. Many would like to control the display.
Managing Google Adsense placement manually gives the publisher more control where we cant to display ads.
See here for older themes:
How to show Google Adsense after the first post on Blogger home page (mobile and desktop)?
How to display Google Adsense after the featured post or first post on Blogger new theme 2017?
- 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"
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.
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.
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.
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
- On clicking the widget, it will take us to the code of that widget
- The widget code may already be expanded showing the Adsense code we added in previous steps.
- 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
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.