How To Add Parallax Ads Widget on Blogger - Insurance Finances

Today, i will be showing you How To Add Parallax Ads Widget on Blogger.

Do you know you can improve ads click through rate by placing a parallax ads on your blogger blog? Yes, and with this guide you should be able to accomplish this with just a simple code which I like to call the blogger parallax ads widget.

Unlike wordpress, you can not easily install a plugin on blogger, you will have to input this widget manually through your html editor or blogger layout section.

Now let's understand what we mean by parallax ads. 

What is a Parallax Ad? 

Simply we can say that, parallax ads is an animation effect that helps capture the attention of readers in an interesting and non-intrusive way. 

What the parallax ads really does is create a unique perception which is used when the viewer scrolls through content on their devices, the ad is fully revealed.

For this blogger tutorial, I will be showing you how to add the parallax ads effect in your blogger posts just like mine.

How To Add Parallax Ads Widget on Blogger

Let's get started on how to install parallax ads widget to blogger.

The first step is to open your blogger theme editor and insert this css code BEFORE the </head> tag.

IMPORTANT NOTE: if you wish to display parallax ads on another part of your blog then you will need to remove the  <b:if cond='data:blog.pageType == "item"'> </b:if>  tag on both CSS and HTML. 

Let me simply explain the work of that tag. The tag only displays content which they contain in a post body, so if you want this code to work outside of the post body then you should remove the tag.

<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
/*<![CDATA[*/
.paralax_div {
  position: relative;
  overflow: visible;
  width: 300px;
  height: 250px;
  margin-right: 20px;
  display: inline-block;
  float: left;
  z-index: 9999;
}
.paralax_div > div {
  overflow: hidden;
  width: 100%;
  height: 100%;
  margin: 0;
  position: absolute;
  top: 0;
  left: 0;
  clip: rect(auto auto auto auto);
}
.paralax_div > div > div {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 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 > div {
  width: 100%;
  height: 100vh;
  position: absolute;
  left: 50%;
  top: 0;
  border: none;
  -moz-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-content: center;
  align-content: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  background: #ddd;
}
.paralax_div > div > div > div > * {
  margin: 0;
  margin-top: 0;
}
.paralax_div > div > div > div > a {
  width: 100%;
  height: 100vh;
}
.paralax_div img,.paralax_div iframe,.paralax_div ins {
  height: 600px;
  width: 300px;
}
.clear {
  clear: both;
  display: block
}

@media screen and (max-width:640px) {
  .paralax_div {
    width: 100%;
    height: 250px;
    margin: 0 auto;
    float: none;
  }
  .paralax_div > div > div > div {
    left: 50%;
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
  }
  .paralax_div > div > div {
    width: 100%;
    left:0;
    text-align: center;
  }
  .paralax_div img {
    margin: 0 auto;
    width:auto;
    max-width:100%;
    height:auto;
  }
}
@media screen and (max-width:320px) {
  .paralax_div iframe,.parallax_banner ins {
    margin: 0 auto;
    width:100%;
    height:600px;
  }
}
/*]]>*/
</style>
</b:if>

Once you are done adding the above CSS before the </head> tag.

You will need to add this html where you want the parallax ads widget to appear. For this tutorial we will be adding this code right below the <data:post.body/>  tag.

<b:if cond='data:blog.pageType == "item"'>
<div class="paralax_div">
  <div>
    <div>
      <div>
        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcwYKGQhnIiLOPxM_9zIKhAMRPnkxLb6zldSLgnSEIfkBBHkK02VbX3XbZ4sUh-4NtxaTF5GA4koICq0qj9XnJYjTsJ1vRnoInN67vZcbocXhtIuBVHosPKJihO4BcSjVJmlNXBEubV1Gc/s300/18835763_10208567628658748_4561466345738187918_n.jpg" alt="banner" width="300" height="600" />
      </div>
    </div>
  </div>
<span class="clear"/>
</div>
</b:if>
  

Note: don't forget to change the image link with your ad image, or if you use Google Adsense then you should replace the image code with your Adsense code. But make sure your ad width is 300 and the height is 600.

Final words

You can find a demo on my posts, and you can modify this code to suit your blogger template design. Also check out this post on How to Enable Ads in the Middle of Posts on Blogger if you want this parallax effect to display in the middle of your posts.

Related Posts