How to Add Parallax Ads Widget in Blogger | Parallax Ads

How to Add Parallax Ads Widget in Blogger

Hello Guys, Welcome to ASThemesWorld. If you want to increase your AdSense Revenue by adding Parallax Ads,then this article will be very helpful for you. In this post,I'm going to guide to step by step on How to Add Parallax Ads in Blogger. So,read the complete article to learn more about How to Add Parallax Ads in Blogger.

What is Parallax Ad?

Parallax is a beautiful, immersive display format designed for mobile web. It leverages a layered, parallax animation effect to capture attention in an interesting and non-intrusive way. The format creates a unique perception that different image layers of the ad have different depths.As the viewer scrolls through content on their phone, the ad is fully revealed

Parallax Ads Demo

Steps to Add Parallax Ads

Adding parallax ads to blogger is not too difficult. We have explained below well how to add parallax ads, follow the below steps carefully, if some mistake will happen then parallax ads will not work.

Step 1. Adding CSS Codes

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}

Step 2. Adding HTML Codes

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>
Information:
  • The Number 3 in above script is code for displaying advertisement after 3 paragraphs,change it as needed.

Step 3. Adding AdSense Codes

Go to your AdSense account and create a new Responsive Vertical Display Ad Unit.

Now copy the data-ad-client & data-ad-slot codes from the Ad Unit and paste these codes where we have marked places for these.

Download Parallax Ad Codes

If the code does not work or you’ve faced any error/problem then please download the source code files from the given download button.

This is all about how to add Parallax Ads in Blogger. If you have followed the steps to add parallax ads correctly, then surely the parallax ad will be working. If you're any problem in adding parallax ads, let us know in the comments and we'll try to solve it as soon as possible.

If you found this article helpful,then do share it and stay connected with our blog for more such cool widgets.