How to add Google Adsense in the middle of post content after read more in new Blogger themes 2017?
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!
Thanks for this, it worked for me on my blog
ReplyDeleteWelcome Mate! Cheers!
DeleteSir please I can't find out this data:post.body in my blogger template .so what can I do for show AdSense add ???
ReplyDeleteWhich Blogger Theme are you using?
DeleteYou may also share your SITE URL to check if you like.
Nice article
ReplyDeleteHI bro, I use the same template has yours and it has been so difficult to place adsense in the middle of my post. Pls walk me through on how you did yours..
ReplyDelete