Demo: Online payment of electricity bills in Nagaland

Google Adsense is the preferred advertisement platform for most Bloggers. It is very easy to implement. It can be added to the Blogger site in so many ways. But basically, in three ways -
1) By choose to auto display ads by Blogger
2) by adding the Adsense code in HTML/JavaScript widgets or
3) directly adding in the Blogger template.


While adding in HTML/JavaScript widget is the simplest way to add Adsense code to Blogger, the flexibility in position the display is a bit limited as we can only show where widgets can be displayed by default, controlled by the regions in the layout page. Otherwise, we can also add Adsense code directly int he Blogger template code. Flexibility of positioning the display is more. In this post we shall see how to display Adsense in the homepage right after the first post.


See here all previous posts related to Adsense and Blogger.

• How to make Blogger widgets visible in Blogger Mobile template (make Adsense visible in mobile template)?
• How to add Google Adsense Code to Blogger Widget Area?
• Different places to put Google Adsense in the new Official Blogger Templates

Desktop: Show Google Adsense after the first post on Blogger home page

• Login to Blogger and click on Theme/Template
• Then click on EDIT HTML
• Find "<b:include data='post' name='post'/>"
• And right after the line "<b:include data='post' name='post'/>", paste the following code.

 <!--ad after first post homepage desktop -->
 <b:if cond='data:post.isFirstPost'>
PASTE YOUR ADSENSE CODE HERE

</b:if>
<!--ad after first post homepage desktop -->

• Save Theme
• Check if the Adsense appeared after the first post on the homepage

Note: After this, we have successfully added Adsense to display on the homepage after the first post. But the Adsense will not show on mobile devices, because the place where we added the code is for desktops. For mobile devices, follow the steps below.

Mobile: Show Google Adsense after the first post on Blogger home page
The code to add is the same but the place where to add the code is different for mobile templates.

• Login to Blogger and click on Theme/Template
• Then click on EDIT HTML
• Find " <b:include data='post' name='mobile-index-post'/>"
• And right after the line " <b:include data='post' name='mobile-index-post'/>", paste the following code.

 <!--ad after first post homepage mobile-->
 <b:if cond='data:post.isFirstPost'>
PASTE YOUR ADSENSE CODE HERE

</b:if>
<!--ad after first post homepage mobile-->

• Save Theme
• Check if the Adsense appeared after the first post on the homepage on mobile device.