What are parallax ads and how to add parallax ads for blogspot/blogger

If you want to create parallax ads - Add a Parallax Ads for bloggers to increase revenue from Adsense, this article will show you step by step how to add ads with parallax effects for bloggers. So, please read the entire article to learn about how to add Parallax Ads in Blogger.

What is parallax advertising

Parallax is a beautiful, attractive display format designed for the mobile web. It takes advantage of multi-layered, parallax animations to attract attention in a fun and non-intrusive way. This format creates a unique perception that the different visual layers of the ad have different depths. As viewers scroll through content on their phones, the ad becomes fully visible.

Insert parallax ads on Blogger posts

Here are the steps to add ads with parallax effect to blogger blog posts.

Add CSS code to Blogger Template

Save the following code on </head>

<b:if cond='data:view.isPost'>
<style>
/*<![CDATA[*/
/* Paralax Ads */
.paralax{position:relative;display:block;overflow:visible;width:100%;height:0;margin:auto;text-align:center;z-index:1}
.paralax > div{overflow:hidden;width:100%;height:100%;margin:0;position:absolute;top:0;left:0;clip:rect(auto auto auto auto)}
.paralax > div > div{width:calc(100% - 40px);height:100%;position:fixed;top:0;left:0;right:0;margin:0 auto;-moz-transform:translateZ(0);-webkit-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0);transform:translateZ(0)}
.paralax > div > div > div{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-align-content:center;align-content:center;-webkit-align-items:center;-ms-flex-align:center;width:100%;height:100%;position:absolute;left:0;right:0;top:37px;align-items:center;background:#fff}
.paralax > div > div > div > *{margin:auto}
.paralax > div > div > div > a{width:100%;height:100%}
.paralax img,.paralax iframe,.paralax ins{height:100%;border:0}
.clear{clear:both;display:block}
.paralax{width:100%;min-width:300px;min-height:600px;text-align:center}
.adParallax{width:100%;min-width:300px;min-height:600px;text-align:center;display:block;margin:0;padding:0}
.drK.paralax,.drK.adParallax{background-color:#1e1e1e}
/*]]>*/
</style>
</b:if>

Change .drK to suit your blog template

Add Html code

Add the following code just below <data:post.body/>

<!--[ Paralax Ads ]-->
                                      <b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>                                
                                      <b:if cond='data:view.isPost'>
                                        <div class='paralax'>
                                          <div>
                                            <div>
                                              <div>
                                                <ins class='adsbygoogle adParallax' data-ad-client='ca-pub-xxxxxxxxxxxxxxx' data-ad-format='auto' data-ad-slot='xxxxxxxxx' data-full-width-responsive='true' style='display:block'/>
                                                <script>
                                                     (adsbygoogle = window.adsbygoogle || []).push({});
                                                </script>
                                              </div>
                                            </div>
                                          </div>
                                        <span class='clear'/>
                                      </div>
                                      <script> /*<![CDATA[*/
                                     function paralax(Ad1) {let paralax = document.getElementsByClassName ('paralax')[0]; if (paralax) {let Adsp = document.querySelectorAll ('.post-body br')[Ad1 - 1]; Adsp.parentNode .insertBefore (paralax, Adsp.nextSibling)}} paralax(4);/*]]>*/</script></b:if></b:if>
                                    <!--[ Paralax Ads ]-->

The default of the javascript code to determine the ad display position is to use the br tag for line breaks. If the blog uses the p tag for line breaks, then change .post-body br to .post-body p
Index 4 is the ad that will be clipped after scrolling to the 4th line. And replace the QC ads code in the orange highlighted area.
If you want the ad to appear on the PC screen, remove the control tag. event <b:if cond='data:blog.isMobileRequest == "true"'>

Note: For some templates, there have been changes to the tag structure <data:post.body/> for example below

<b:if cond='data:view.isSingleItem'>
                          <!--[ Post body ]-->
                          <div class='postEntry' expr:id='&quot;postID-&quot; + data:post.id'>
                            <div class='postBody' id='postBody'>
                              <data:post.body/>                              
                            </div>
                          </div>
                        </b:if>

In the tag <div class='postBody' id='postBody'> It does not have a post-body class like in javascript, so we need to add a post-body class for the ad to appear in the correct position. Adding it would look like this:

<b:if cond='data:view.isSingleItem'>
                          <!--[ Post body ]-->
                          <div class='postEntry' expr:id='&quot;postID-&quot; + data:post.id'>
                            <div class='post-body postBody' id='postBody'>
                              <data:post.body/>                              
                            </div>
                          </div>
                        </b:if>