How to display Google Adsense after more link or jump break and at the end of the post in Blogger?

, , ,
How to display Google Adsense after more link or jump break in Blogger?

Google Adsense is more of the most preferred Ad network for any blogger. There are several ways and places to display Google Adsense on Blogger blog / website.  To learn more about placing Google Adsense on Blogger, kindly refer to previous posts here.

In this post, we shall see How to display Google Adsense after read more link or jump break in Blogger, and also display Google Adsense at the end of the post.


As stated, there are various places where Google Adsense can be displayed. Displaying Adsense "in content" is one of the most preferred as the click through rate is higher for in content ads. Displaying ads right below the "read more" link is preferred since the ad is not displayed in feed but only when the single post is displayed.

To display Google Adsense after read more link or jump break in Blogger, do the following:

  • Go to Blogger > Theme
  • Click Backup/Restore to backup the Theme first
  • Then at Blogger > Theme , click on EDIT HTMML
  • Search for <head>
  • Just below <head> tag, paste the following JQuery code
    Note: If there is already a JQuery code added to your theme, no need to add
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js' type='text/javascript'/>

  • Next, paste the following code below the JQuery Code added above

<script type='text/javascript'>
$(document).ready(function(){
$(&#39;a[name=&quot;more&quot;]&#39;).before($(&#39;#ad-after-more&#39;).html());
$(&#39;#ad-after-more&#39;).html(&#39;&#39;);
});
</script>


  • Now, search for <data:post.body/> and right below this line, paste the following code
 <b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style="display:none;">
<div id='ad-after-more'>
<br/>
<center>
ENCODED ADSENSE CODE HERE 
</center>
<br/>
</div>
</div>  </b:if>

NOTE: Replace "ENCODED ADSENSE CODE HERE".  
Copy Google Adsense code and get it encoded first. Then replace above.
You can use the following links to encode your Google Adsense Code:
  • https://www.superwebtricks.com/encode-decode-adsense-ad-codes/
  • https://www.bloggerspice.com/p/html-encoder.html
  • http://www.mybloggertricks.com/2008/10/convert-special-html-characters-to.html

Save the theme.
The above code displays the Adsense right after "Read More".

Display Google Adsense after "Read More" and at the end of the post:

If you would like to display Google Adsense after "Read More" and also at the end of the post, then simply delete the lines highlight in red above.

So the code at <head> becomes:

<script type='text/javascript'>
$(document).ready(function(){
$(&#39;a[name=&quot;more&quot;]&#39;).before($(&#39;#ad-after-more&#39;).html());
});
</script>

  • And, the code after the <data:post.body/> becomes:
 <b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='ad-after-more'>
<br/>
<center>
ENCODED ADSENSE CODE HERE 
</center>
<br/>
</div>
 </b:if>



Related Posts:

 

No comments

Subscribe to: Post Comments ( Atom )