Parallax ad is a unique type of ad that creates an optical illusion to the reader when scrolling article paragraphs, the ad is located in the background of the page in a sticking position when scrolled, so the ad looks like it is passing behind between the paragraphs of the current article text. be read.
Parallax ads have advantages and disadvantages, so it is mandatory for you to read and find out what the advantages and disadvantages are before placing this ad on your blog.
Advantages of Parallax Ads
Not only is it unique and looks pleasing to the eye because of its optical illusion, parallax ads can also increase CTR (Click Through Rate) because its full size almost covers the screen but doesn't disturb visitors.<
Other benefits of parallax ads that I share are of course easy to install because these ads only use a little extra CSS and Javascript, apart from that these ads are also very suitable to be installed on any blog/web niche.
Disadvantages of Parallax Ads
Parallax ads can only appear in mobile conditions, this is due to the ad size adjustment for type Vertical which should fill part of the screen. Of course, it's impossible for an ad to fill the entire laptop screen, therefore this Parallax ad will only appear on a smartphone.
I think that's the only drawback, now let's discuss how to install it!
How to Install Parallax Ads
First before making modifications, especially if you are a Blogger service user. Backup of the template before making any modifications is strictly required.
Please add the CSS and Javascript code below to your blog template.
.parallaxAd {
display: block;
height: 600px;
margin: 1rem auto;
position: relative;
}
.prlx1 {
clip-path: inset(0 0 0 0);
position: absolute;
overflow: hidden;
margin: auto;
}
.prlx2 {
align-items: flex-start;
display: flex;
display: inline-flex;
justify-content: center;
position: fixed;
}
.prlx1, .prlx2 {
bottom: 0;
left: 0;
right: 0;
top: 10px;
}
.prlx1, .parallax ins {
height: 100%;
width: 100%;
}
.parallaxAd {
display: block;
height: 600px;
margin: 1rem auto;
position: relative;
}
.prlx1 {
clip-path: inset(0 0 0 0);
position: absolute;
overflow: hidden;
margin: auto;
}
.prlx2 {
align-items: flex-start;
display: flex;
display: inline-flex;
justify-content: center;
position: fixed;
}
.prlx1, .prlx2 {
bottom: 0;
left: 0;
right: 0;
top: 10px;
}
.prlx1, .parallax ins {
height: 100%;
width: 100%;
}
(function() {
let ads = document.querySelector('.parallaxAd');
if (ads) {
let post = document.querySelectorAll('.post-body br, .post-body p'), x = parseInt(post.length / 6); // sesuaikan posisi
if (post[x].nodeName == 'P') {
post[x].parentNode.insertBefore(ads, post[x]);
}
else {
post[x].parentNode.insertBefore(ads, post[x].nextSibling);
}
}
})();
Furthermore, if the two codes above have been added to the template, now go to the Adsense dashboard to create a new ad unit with the format "Display Ad".
Because parallax ads require large ad size, we set the Display Ad size option from Responsive to Fixed or Fixed</ b>, then set the size to 300x600 px.
Copy the additional HTML code below, then paste the code just below <data:post.body/>
Please replace the part I marked with the Display Ad code that was created earlier.
<b:if cond='data:blog.isMobileRequest and data:view.isPost and !data:view.isPreview'>
<div class='parallaxAd'>
<div class='prlx1'>
<div class='prlx2'>
<!-- Paste Ad Code In This Area -->
</div>
</div>
</div>
</b:if>
To see the results, please visit your blog with a smartphone. Or enter mobile mode by inspecting the element by pressing the ctrl+shift+c.