Join our Telegram and Youtube Channels

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

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.

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


You may also Like

1 comment

  1. Test Comment