How to add Google Adsense in the middle of post content after read more in new Blogger themes 2017?
3 min read
Have you checked out the new Official Blogger themes from Google? If you have not, then I recommend you to check out the previous post - Check out new responsive Blogger themes released by Google! And, if you have, then I am wondering if you are thinking how and where to place Google Adsense in the new official Blogger themes. You can also check out different regions where you can place and display Google Adsense ads on new Blogger Themes here.
Besides automatically displaying Google Adsense ads from Blogger or manually adding Google Adsense ads via HTML/JavaScript widgets / gadgets, if you intend to place Google Adsense ads in the middle of post content, then you can do so in the following steps.
Show Google Adsense Ads right after read more in new Blogger theme
- Login to Blogger
- Click Theme > Edit HTML
- Click anywhere in the page displaying the Blogger template code
- Then press CTRL + F and search for " <head>" (without "")
- Paste the following code right after <head>
<!--for adsense middle ads-->
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$('a[name="more"]').before($('#jkp-google-ad').html());
$('#jkp-google-ad').html('');
});
</script>
<!--for adsense middle ads-->
- In the same way, do CTRL + F and search for "<data:post.body/>" (without "")
- Right after "<data:post.body/>", paste the code from Google Adsense. Example Below.
<!--adsense middle mobile and desktop start-->
<b:if cond='data:blog.pageType == "item"'>
<!-- comment this to post ad after DIV and bottom of the content <div style='display:none;'> -->
<div id='jkp-google-ad'>
<br/>
<center>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 300x250 -->
<ins class="adsbygoogle"
style="display:inline-block;width:300px;height:250px"
data-ad-client="ca-pub-XXXXXXXXXXXX"
data-ad-slot="XXXXXXXXXXXX"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</center>
<br/>
<!-- </div> -->
</div> </b:if>
<!--adsense middle mobile and desktop end-->
Where XXXXXXXXXXXX is your Google Adsense published ID and ad slot respectively.
NOTE:
If you place Google Adsense code as it is from Google Adsense page, you might get error related to "async". In that case, replace the above code with your Google Adsense publisher ID and slot ID
- Save the theme.
- Now you should be able to see Google Adsense ads displayed right after the "Read more" break and also at the end of the post content.
If you want to show only one ad after the read more break and not at the bottom of the page, then remove the comment from the third line of the above code (highlighted red above). So it now looks like -
<!--adsense middle mobile and desktop start-->
<b:if cond='data:blog.pageType == "item"'>
<div style='display:none;'>
<div id='jkp-google-ad'>
<br/>
<center>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 300x250 -->
<ins class="adsbygoogle"
style="display:inline-block;width:300px;height:250px"
data-ad-client="ca-pub-XXXXXXXXXXXX"
data-ad-slot="XXXXXXXXXXXX"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</center>
<br/>
<!-- </div> -->
</div> </b:if>
<!--adsense middle mobile and desktop end-->
Where XXXXXXXXXXXX is your Google Adsense published ID and ad slot respectively.
After saving the theme, you should be able to see one Google Adsense ad after the read more break and the ad at the bottom is not displayed.
Hope this is helpful to someone. Cheers!