Ssalam to everyone in my previous post I have shared how to put adsense ads in the middle of blogger posts and on this occasion I will share the same topic, namely how to put adsense ads before or after certain elements.
what is meant by certain elements is, for example in a post we have a related post we can display an ad before the related post element , more or less the appearance will look like below.
Lorem Ipsum is simply dummy text
<!-- will show ads here -->
related post hare
related 1
related 2
related 3 How to Place Ads Before Certain Elements
Before that, make sure you understand the class and id in the template, here I will give an example, for example, I have a related post with a related-post class, so I can use the script below.
<b:if cond='data:view.isPost'>
<div class='BLOGGER-STOREAdsBefore'>
<!-- will show ads here -->
</div>
<script>
//<![CDATA[
function BLOGGER-STOREAdsBefore(e,t){let o=document.getElementsByClassName("BLOGGER-STOREAdsBefore")[0];if(o){let d=document.querySelectorAll(e)[t-1];d.parentNode.insertBefore(o,d)}}BLOGGER-STOREAdsBefore(".post-body .related-post","1");
//]]>
</script>
</b:if>you can put this code above </body> or <!--</body>--></body> and don't forget to replace <!-- Your AdSense Ad Code Here --> with your ad unit code, and class .related-post with your class , id or tag
pay attention to the code BLOGGER-STOREAdsBefore(".post-body .related-post", "1") .post-body is an html element where the contents of the post, so no need to change it because usually all templates are the same except the name of the element is different. Then the ad will be inserted before the html element with the first .related-post class , if there are many related posts in the post, the first one is selected.
it doesn't have to be a related post element, it can also be another element, for example before heading 2 as below.
Lorem Ipsum is simply dummy text
<!-- will show ads here -->
<h2>SUBHEADING</h2>
Lorem Ipsum is simply dummy text
then the code used will look like below
<b:if cond='data:view.isPost'>
<div class='BLOGGER-STOREAdsBefore'>
<!-- will show ads here -->
</div>
<script>
//<![CDATA[
function BLOGGER-STOREAdsBefore(e,t){let o=document.getElementsByClassName("BLOGGER-STOREAdsBefore")[0];if(o){let d=document.querySelectorAll(e)[t-1];d.parentNode.insertBefore(o,d)}}BLOGGER-STOREAdsBefore(".post-body h2","1");
//]]>
</script>
</b:if>meaning that the ad will appear on the first h2 tag , if there are a lot of h2 in the post then the 1st one is selected , you can also change it to the 2nd or 3rd , please adjust your needs.
what if it was the other way around? in the tutorial above, to display ads before certain elements, now we will make display ads after certain elements, let's see how below.
How to Place Ads After Certain Elements
The method of application is the same as the method above, the difference is that this script is just the opposite, so I don't need to explain it again.
I also now use this method to display parallax ads after the related post elements on this blog, you can see all my posts on the mobile display my parallax ads appear after / after the related post elements.
so for those of you who want to display ads after certain elements, you can use the script below.
Lorem Ipsum is simply dummy text
related post hare
related 1
related 2
related 3
<!-- will show ads here -->
<b:if cond='data:view.isPost'>
<div class='BLOGGER-STOREAdsAfter'>
<!-- will show ads here -->
</div>
<script>
//<![CDATA[
function BLOGGER-STOREAdsAfter(e,t){let n=document.getElementsByClassName("BLOGGER-STOREAdsAfter")[0];if(n){let d=document.querySelectorAll(e)[t-1];d.parentNode.insertBefore(n,d.nextSibling)}}BLOGGER-STOREAdsAfter(".post-body .related-post","1");
//]]>
</script>
</b:if>ok so here are some ways to put adsense ads before or after certain elements, hopefully it's useful
