|
| How to place adsense ads before or after certain elements |
Hello everyone, in the previous post I shared how to place AdSense ads in the middle of Blogger posts. On this occasion, I will share a related topic: how to place AdSense ads before or after specific elements.
By “specific elements,” I mean—for example—if your post contains a related post section, you can display an ad before that related post element. The appearance will look roughly like the example below.
Lorem Ipsum is simply dummy text
<mark>related post here</mark>
<li>related 1</li>
<li>related 2</li>
<li>related 3</li>
<i><!-- the ad will appear here --></i>How to Place Ads Before a Specific Element
First, make sure you understand classes and IDs in your template. For example, if you have a related post section with the class related-post, you can use the script below.
<b:if cond='data:view.isPost'>
<div class='CloudDroidAdsBefore'>
<!-- Your AdSense ad code goes here -->
</div>
<script>
//<![CDATA[
function CloudDroidAdsBefore(e,t){
let o=document.getElementsByClassName("CloudDroidAdsBefore")[0];
if(o){
let d=document.querySelectorAll(e)[t-1];
d.parentNode.insertBefore(o,d);
}
}
CloudDroidAdsBefore(".post-body .related-post","1");
//]]>
</script>
</b:if>
Info!
You can place this code above
</body> or
<!--</body>--></body>.
Don’t forget to replace
<!-- Your AdSense ad code goes here -->
with your own ad unit code, and replace the
.related-post class with your own class, ID, or tag.
Pay attention to the code
CloudDroidAdsBefore(".post-body .related-post", "1").
.post-body is the HTML element that contains the post content,
so it usually does not need to be changed unless your template uses a different name.
The ad will be inserted before the first HTML element with the
.related-post class. If there are multiple related posts, the first one will be used.
It doesn’t have to be a related post element—you can also target other elements, such as placing the ad before an H2 heading, as shown below.
Lorem Ipsum is simply dummy text
<mark>related post here</mark>
<li>related 1</li>
<li>related 2</li>
<li>related 3</li>
<i><!-- the ad will appear here --></i>The script used would look like this:
<b:if cond='data:view.isPost'>
<div class='CloudDroidAdsBefore'>
<!-- Your AdSense ad code goes here -->
</div>
<script>
//<![CDATA[
function CloudDroidAdsBefore(e,t){
let o=document.getElementsByClassName("CloudDroidAdsBefore")[0];
if(o){
let d=document.querySelectorAll(e)[t-1];
d.parentNode.insertBefore(o,d);
}
}
CloudDroidAdsBefore(".post-body h2","1");
//]]>
</script>
</b:if>This means the ad will appear before the first H2 tag. If there are multiple H2 tags, you can change it to the second or third one by adjusting the number as needed.
What if you want the opposite? The tutorials above show how to display ads before a specific element. Now we’ll show how to display ads after a specific element.
How to Place Ads After a Specific Element
The implementation method is the same as above—the only difference is that the script works in reverse, so there’s no need to explain it again.
I personally use this method to display parallax ads after the related post element on this blog. You can see it on all my posts in mobile view, where the parallax ad appears after the related post section.
If you want to display ads after a specific element, you can use the script below.
Lorem Ipsum is simply dummy text
<mark>related post here</mark>
<li>related 1</li>
<li>related 2</li>
<li>related 3</li>
<i><!-- the ad will appear here --></i>
<b:if cond='data:view.isPost'>
<div class='CloudDroidAdsAfter'>
<!-- Your AdSense ad code goes here -->
</div>
<script>
//<![CDATA[
function CloudDroidAdsAfter(e,t){
let n=document.getElementsByClassName("CloudDroidAdsAfter")[0];
if(n){
let d=document.querySelectorAll(e)[t-1];
d.parentNode.insertBefore(n,d.nextSibling);
}
}
CloudDroidAdsAfter(".post-body .related-post","1");
//]]>
</script>
</b:if>That’s it for this guide on how to place AdSense ads before or after specific elements. Hopefully, it’s useful.
