How to add Parallax Ads in Blogger | Parallax Ads | Pixabin

Copy

Hi dude, welcome back to our pixabin website. let us see how to add parallax ads on the blogger website. You need to understand this beforehand. Many advertising formats have arrived today, with the most popular and most effective advertising formats being parallax ads, sticky ads, and floating ads.

This will be easily clicked by many users. This is because the ad format is different and many people want to click on it. That is why this form of advertising is also used by many popular websites. Now we hope you understand a little bit about these Parallax ads. Now let's see how to add these Parallax ads to your blogger website.

What is Parallax Ads?

Parallax ads are ads that are visible as you look through the window at the back of the page as you move the pages on your website. That is, the ad will appear and disappear on the back of the page as the user moves the page. This is what Parallax ads are all about.

Pros and Cons of Parallax Ads

Pros

Increase your Adsense Revenue
Give Pro Look
Easily Click Ads
Gives Professional Look
Give an Attractive Look to your Blog Posts
Do not disturb to User on this Type of Ads

Cons

No Cons or Disadvantages but you can add many Parallax Ads you can be got many Adsense problems. and users can not like many parallax ads. so, only use one Parallax ad on your Blog Posts

Do you want to download this Parallax ads Script into your Device? Please Hit the Download Button and Download the All-Script into your hand.

Download

How to add Parallax Ads on Blogger

Step 1: First of all Open Your Blogger Dashboard and Click the Theme Section
Step 2: Next, Click the Drop Down Menu and Press Edit Html Option on the drop-down Menu
Step 3: Next, Press Ctrl+F and Find ]]></b:skin> Tag. After Copy the Below CSS Script and Paste Above on ]]></b:skin> Tag.

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

Step 4: Next, Again presss Ctrl+F and Find <data:post.body/> tag on your Blogger theme.
Step 5: Next,Copy the below Script and Replace to <data:post.body/> Tag

<b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>
 <b:if cond='data:view.isPost'>
  <div class='pixabin-parallax'>
   <div>
    <div>
      <div>
       <ins class='adsbygoogle pixabin-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 pixabin-parallax(Ad1) {let paralax = document.getElementsByClassName ('pixabin-parallax')[0]; if (paralax) {let Adsp = document.querySelectorAll ('.post-body p')[Ad1 - 1]; Adsp.parentNode .insertBefore (paralax, Adsp.nextSibling)}} pixabin-parallax(3);/*]]>*/</script></b:if></b:if>

Step 6: Do not forget to Save the Theme
Step 7: Your Parallax Ads is Ready to Show

Custom modification

Do not forget to change your Google Adsense Publisher Ads and Ad Slot id on Above Script

Final Words

We hope this Parallax Ads Script helps to Create Parallax Ad format into your Blog Post. If you want to like this blogger-related Article please follow my Website on Google News. Thank you Reading😊.

Please Do these things For me

Subscribe to my Youtube Channel
Subscribe to my Telegram Channel and Telegram Group
Follow my Website on Google News

Pixabin Official