How To Add Parallax Ads Widget on Blogger

How To Add Parallax Ads Widget on Blogger


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://4.bp.blogspot.com/-JpV04y4MQwM/WTITSODPw-I/AAAAAAAArd4/KKuyWD3QGuADLhqSj2Oif781jK4xrnNjQCLcB/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.

0 Comments

all insurance post insurance state insurance insurance protection iphone insurance insurance coverage insurance business free insurance company insurance insurance logo define insurance no insurance loan insurance contents insurance insurance blog insurance ads insurance information ipad insurance production insurance insurance products insurance software link insurance insurance template product insurance lifetime insurance business contents insurance id insurance insurance template free contents coverage insurance pdf content insurance coverage insurance games business product insurance game insurance production company insurance insurance c insurance templates free download insurance 2022 and contents insurance overview types of insurance products business insurance blog business insurance template insurity product insurance forms template best contents insurance insurance 2021 gaming pc insurance form of insurance protection products insurance insurance software products product insurance companies contents coverage insurance insurance support technical insurance insurance for bloggers financial insurance products in the game insurance product insurance coverage insurance templates pdf product protection insurance insurance information form template state contents insurance insurance product is which contents insurance bom insurance get contents insurance contents insurance companies productivity insurance business and contents insurance insurance for software products insurance included best insurance blogs best company for contents insurance insurance company products business contents coverage insurance production the best contents insurance insurance website content insurance form template pdf top insurance blogs free contents insurance best insurance products production in insurance insurance linked products post production insurance insurance products pdf business content insurance coverage define contents insurance content for insurance website insured goods contents insurance guide insurance for business contents insurance is a financial product that contents in insurance insurance blog posts insurance for gamers insurance company blog top insurance software products content for insurance company contents insurance top insurance products content of insurance good contents insurance as contents insurance contents of insurance types of contents insurance no contents insurance linked insurance products finance and insurance products creating an insurance product best business contents insurance and contents insurance insurance coverage blog business insurance for bloggers insurance product information insurance blog content pdf insurance template