How to Add Parallax Ads Widget in Blogger | Parallax Ads

Hello Blogmate's How are you ? I hope you are doing great. Most of you somehow will have noticed on in-article ads which has a impressive animated effect in many of blogs.

Adding parallax ads to Blogger isn't too difficult.We have explained in detail below. So in this blog we are going to discuss about Parallax Ads and how to add them in blogger.

What is parallax ads? 

Parallax is a beautiful, vibrant display format designed for the mobile web. It takes advantage of layered animation and parallax to capture attention in a interesting and non-intrusive way. This format creates the unique perception that the ad's different image layers have different depths. When the viewer scrolls through the content on their phone, the ad is fully displayed.

Benefits Of Parallax Ads

• Increase your Adsense Revenue
• Providing Impressive Look
• Easily Click Ads
• Attracting more site viewer's
• User Friendly Ads 

However, There are No Cons or Disadvantages. You can add many Parallax Ads on your site but you may face many problems in Adsense. Also , Users usually not like many parallax ads. so, only use one Parallax ad on your Blog Posts

Steps to Add Parallax Ads

• Open your Blogger dashboard.
• Click on theme section and then edit HTML.

• Search for the code ]]></b:skin> and paste the following CSS code above it.

/* Paralax Ads CSS */
.avparalax{position:relative;display:block;overflow:visible;width:100%;height:0;margin:auto;text-align:center;z-index:1}
.avparalax > div{overflow:hidden;width:100%;height:100%;margin:0;position:absolute;top:0;left:0;clip:rect(auto auto auto auto)}
.avparalax > 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)}
.avparalax > 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}
.avparalax > div > div > div > *{margin:auto}
.avparalax > div > div > div > a{width:100%;height:100%}
.avparalax img,.avparalax iframe,.avparalax ins{height:100%;border:0}
.clear{clear:both;display:block}
.avparalax{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:10px 0px; padding:0px;}
.dark-mode.avparalax, .dark-mode.adParallax{background-color:#1e1e1e}

• Now add the following HTML codes above to <data:post.body/>.
• There may be more than one <data:post.body/> code in the template, so please try one by one and see if its working

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

Adding AdSense Codes

• Go to your AdSense account and create a new responsive vertical display ad unit. 
• Now copy the data-ad-client and data-ad-slot codes from your ad unit and paste these codes where you marked the location.
• The Number 3 in above script is code for displaying advertisement after 3 paragraphs,change it as needed.

Conclusion

So today we have discussed about How to Add Parallax Ads Widget in Blogger . I hope you like this post kindly do give a comment below. If you are having problem implementing this kindly contact me. Do visit regularly for getting more updates like this.